2026 · Lab
№07 — 3D lab
Sir Orrick's
A 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.
- Role
- Solo, design and code
- Type
- Concept brand, v3
- Stack
- three.js · GLSL · Web Audio
- Assets
- Built in code or by script
// 3 min read
The idea
One continuous stage. A single 3D object, built at runtime, stays on screen from the first frame to the footer. It glides into a slot for each chapter while the ground changes around it: cream, green, a bar by the fire, a storm, then sun. It gets rained on and dried off before the finale. Version three adds the whiskey bottle, with a switch in the header between the bottle and the can.
The story, scene by scene
Scene | Ground | The object |
|---|---|---|
The Oath | Cream | Right and large; the mute button sits under the lead |
The Round, Canned | Green | Centre, one full turn in step with the notes |
The Pour | Cream | Tilts and pours with the four stamps |
Pull up a chair | The bar by the fire | Stands on the bar top |
The Weather | Storm | Rain, drops forming, streams running down |
The Break | Storm to sun | Sun shafts, glints, drying, steam |
Find Sir Orrick's | Cream | Front on, then leaves with the green footer |
A bottle built in code
The bottle's shape is measured off the brand's detail sheet, row by row: the neck's waist and bulge, a shoulder that matches the drawing within a pixel, the body's taper, a thick heel, a domed floor and a punt. It's dressed in the brand book's own front label, back label and neck strip.
The glass has real wall thickness, and the whiskey traces each view ray through the bottle: refraction, internal reflection, and the labels seen through from behind. Light even passes through the solid base and comes up gold through the floor. The whiskey, glass and print skip the scene's tone mapping, so amber stays amber and the brand's greens stay deep.
amber stays amber.
Whiskey that moves
The surface in the neck is a small wave simulation. It rests square to the gravity the whiskey feels, which is the real gravity minus the bottle's own acceleration as it is carried across the page. When the bottle tilts, glides or stops, waves run across the neck, bounce off the glass and settle. The level keeps its volume as the bottle leans, up to 50°, and spinning the bottle doesn't stir it.
A bench for tuning it
/bottle shows the bottle alone, with every setting its look costs, from most to least expensive, each explained under its slider. Presets run from Ultra to Minimum, with a guess at the right one from the machine's GPU, and the frame rate, frame time, draw calls and triangle count are on screen to judge them by.
One clock, light on the device
The scroll is smoothed once. The object, the ground, the copy, the rain and the sound all follow that one value, so they never drift apart.
The 3D renders into a canvas window that moves with the object, not a full-screen layer: compositing a full-screen transparent canvas costs a third of the frame on weak GPUs.
The rain and the steam's hiss are synthesised with Web Audio, with no sound files. Sound starts on the first click, key or touch, and there are mute buttons at both ends of the page.
Without WebGL, a CSS can follows the same director.