Showroom · Make-of

How Alborada was made

Follow one coffee bean from fruit to cup across five chapters — cherry, drying yard, roast, grind and bloom, the pour. One bean is present the whole way through, its surface arcing from waxy green to oily roast, and each chapter is a composed 3D tableau rendered live with three.js. It reads like a scrolling film, but underneath it is a small state machine, not a timeline scrub.

What it demonstrates

That a scroll story can be discrete and still feel cinematic. Instead of scrubbing one long animation, each flick of the wheel is a quantised step that plays a full transition — and input is locked while it plays, so trackpad momentum can never double-fire or knock the story backwards. The result is a sequence of deliberate, framed shots rather than a smear you can land between. It also keeps its facts straight: the six-to-eight-month ripening, the ~11% drying moisture, first crack near 196 °C, the bloom's escaping CO₂, crema under nine bars — all real, on a page that says plainly the roastery and its lot are fictional.

Techniques, honestly named

• A chapter state machine, not a scroll scrub — a tiny state object holds the current chapter and a phase (idle or wipe). Wheel, touch and keyboard are quantised to single steps; during a transition and a short cooldown after, every input is dropped, so the journey advances one deliberate chapter at a time.
• One persistent hero bean, arced by material — the same procedurally displaced bean (an ellipsoid with a real centre crease) is present in every chapter. In the roast its colour interpolates green → straw → cinnamon → brown as roughness and clearcoat shift and a pale silverskin fades into the crease; it even swells at first crack.
• Five tableaux in one scene — each chapter is its own group, offset far apart in world space so their lights never bleed into each other; switching chapters just toggles which group is visible and re-tints the fog and background. The camera eases from an entry pose to a resting pose so every chapter opens with a small push-in.
• Set pieces built from primitives and instancing — the drying yard is a couple of thousand instanced parchment beans on raised beds; the roaster is a drum with a perforated glowing back-plate, an instanced batch tumbling up the wall and cascading, sparks and a first-crack pop; the bloom is a breathing grounds bed with CO₂ bubble sprites, a pour stream and steam; the cup is a lathed espresso with a procedurally painted crema and a labelled bag.
• A diagonal wipe transition — between chapters a slanted edge sweeps the viewport (CSS clip-path, cover then reveal), the incoming chapter swaps in at the midpoint behind the cover, and the chapter's roman numeral and name rise and fall in the wipe.
• Respectful fallbacks — reduced motion drops the loop and jump-cuts between settled frames; no WebGL (or a stalled CDN) turns the five chapters into a readable illustrated article with an Unsplash hero; a lost GPU context is caught and the environment rebuilt on restore. Nothing plays audio, and nothing moves that the reader didn't ask to move.

Recreate it