ES Let's talk_
← Projects

[Project 06 · 3D web]

ALBA_

An octagonal moka pot that spins, comes apart and brews coffee as you scroll. ALBA is a fictional brand we created in the lab to explore how to tell a product's story in 3D: from modeling in Blender to a website that runs in real time in the browser.

TypeIn-house project · Lab FormatInteractive 3D website Our roleConcept, 3D and development
How it works Visit the site ↗
ALBA on a phone: the octagonal moka pot with a terracotta handle in front of the word ALBA in giant type.

[alba-moka.vercel.app]

[The idea]

A product page where scrolling doesn't move down the page: it moves the object. Every turn of the wheel spins the moka pot, takes it apart or brings the coffee up_

[Site walkthrough]

[Five scenes]

One coffee,
start to finish_

The 3D stays pinned full-screen while scrolling moves the story forward. The information lives in the corners, and a giant word behind the object changes with every scene.

01 Cover: the moka pot in front of the word ALBA with the headline “The ritual starts on the stove.”

Origin_

The moka pot falls spinning onto the word ALBA. You can drag it to turn it around.

02 The moka pot in profile with the handle in front and the headline “Eight sides, no bad angle.”

Form_

The camera circles it while a strip of text runs behind: eight sides, one flame, three minutes.

03 Vertical exploded view of the moka pot with labels: lid, upper chamber, gasket, filter, funnel and boiler.

Exploded view_

Six pieces separate, with technical labels anchored to the 3D, like an engineering drawing.

04 Dark scene: the flame glows under the moka pot, the open lid lets out steam and a timer reads 01:58.

Flame_

Everything goes dark. The flame lights up, the lid opens, the coffee rises and a timer counts down the three minutes.

05 Final scene: the moka pot over “Buenos días,” with a handle color picker and price.

Ritual_

The light comes back, the moka pot makes a full turn and the configurator appears with price and checkout.

[Configurator]

Change the handle,
change the brand_

Four Bakelite colors. Picking one tints the handle, the knob and the logo in 3D, and the accent color of the whole site changes with them.

ALBA with a terracotta handle.
[Terracotta]
ALBA with a sage green handle; the headline and the site's accents also switch to sage.
[Sage]

[The model]

Built
piece by piece_

Modeled in Blender at real scale, 196 mm tall, with every piece separate so it can come apart. Compressed, it weighs 300 KB.

The six pieces of the moka pot separated vertically with their labels.

[Exploded view in the browser]

  • BoilerOctagonal body, concave base, turned neck with five thread turns and a brass safety valve.
  • FunnelA basket holding ground coffee in a small mound of irregular grains.
  • Filter and gasketA disc with hundreds of perforations and a rubber gasket.
  • Upper chamberPronounced spout, central column, inner thread and a plate with the embossed logo.
  • Handle and lidFlat Bakelite handle, knuckle hinge and knob.
  • FinishBrushed aluminum with studio reflections, edges polished by use and fingerprints where it's held.

[On the phone]

The same story,
vertical_

The camera pulls back and the labels rearrange for narrow screens, without losing the exploded view.

ALBA's cover on a phone.
ALBA's exploded view on a phone, with labels on the sides.
The flame scene on desktop.

[Under the hood]

What we did_

Brand, design system, 3D model and website, end to end.

Brand and design system

Name, octagonal logo, an espresso and terracotta palette, and editorial typography with technical-drawing labels.

Modeling in Blender

Pieces with their own pivots for the exploded view and the hinged lid, exported to GLB with Draco compression.

Scroll as a timeline

A single timeline tied to the scroll moves the camera, pieces, light, steam and text.

Materials that feel real

Brushed aluminum with anisotropic reflections, wear and fingerprints: textures generated in code so the site stays lightweight.

Interaction

Drag to spin with inertia, tilt based on scroll speed, a custom cursor and magnetic buttons.

Configurator

The handle color is applied in 3D and to the accent of the entire interface at the same time.

BlenderThree.jsGSAP · ScrollTriggerSplitTextLenisViteDracoVercel

[Live]

Brew a coffee_

Scroll, take it apart and pick your handle color. Best viewed on a computer.

Go to ALBA ↗