2026 · Lab
№05 — 3D lab
Donabe
A scroll-driven 3D brand site for a concept lager. The can gets colder as you scroll, and almost every asset is generated in code.
- Role
- Solo, design and code
- Type
- Concept brand
- Stack
- three.js · R3F · GSAP
- Download
- ~300 KB beyond code
// 2 min read
The idea
A heritage lager from the upper Danube, told in one scene. The can never leaves the frame. It gets colder as you scroll, from mist to beads to running trails to ice, and every section uses a different format.
The story, section by section
Section | Format | The can |
|---|---|---|
Arrival | The name stands behind the can | Centre, lights come up |
Our story | One sentence, lit word by word by the scroll | Right third |
Heritage | A year rail: 1874, 1891, 1923, 1958 | One light change per era |
The craft | Numbers that count up, then each ingredient's source | Turns to show the back panel |
Taste | Pour, nose, taste, finish, along a drawn line | Crosses to the left |
Find Donabe | The stockist call to action | Drops into crushed ice |
Almost nothing to download
The can, the label, the condensation, the ice, the fog and even the impact sound are generated in code. The label is drawn with the Canvas 2D API into colour, roughness and glow maps at start-up: about 60 ms on a desktop, and 0 KB to download instead of roughly 700 KB of textures.
The only files shipped beyond code are two self-hosted fonts (about 132 KB) and a few stills for the fallback mode.
What I left out, on purpose
drei: only an environment rig and a performance monitor were needed, about 80 lines of my own code, and its HDRI presets fetch from a third-party CDN.
Smooth-scroll libraries: damping on the 3D side already gives the scroll weight, and native scroll never fights touch or assistive scrolling.
Post-processing: grain and vignette are a CSS layer.
For everyone
With reduced motion or without WebGL, the same story plays in normal page flow with stills rendered from the scene itself. Quality tiers cap the pixel ratio on slower devices, and you can grab the can and spin it.
Sir Orrick'sA scroll-told brand site for a concept Irish beer and whiskey: one 3D object stays on stage through rain and sun, and the bottle's glass and whiskey are traced ray by ray.Read the case study →