Scroll-driven 3D narrative
A scroll-driven walk down an abandoned railway in a rainforest, rendered live in the browser at 60fps.

The hard part
Holding 60fps through volumetric fog, rain and a kilometre of procedurally placed forest — on a laptop, in a browser tab, with no loading screen.
Measured
- Frame rate
- 60fps median, 56fps at p95
- First paint
- 836ms
- Total transfer
- 434KB
- Scene length
- 10,350px of scroll, 5 chapters
- Renderer
- WebGL2
Taken on the live build, 1440×900, cold cache. Reproduce them yourself.
A narrative piece built as one continuous 3D scene. There are no images and no video — every tree, sleeper, rail and raindrop is geometry, rendered live in the browser as you scroll. The camera walks a disused forest railway through five chapters and ends at the locomotive still sitting in the rain where it stopped.
What made it hard
- Fog that has depth. The forest reads as deep because light scatters through it volumetrically rather than fading to a flat colour. That effect is usually where frame rate goes to die.
- A forest that isn't a forest. Placing thousands of trees individually would not survive a mobile GPU. The canopy is instanced and placed procedurally along the route, so the scene stays inside budget however far you walk.
- Scroll as a camera track. Scroll position drives a spline the camera rides, damped so a trackpad flick reads as a walk rather than a teleport.
- Nothing to wait for. The whole experience transfers in 434KB and paints in under a second. A 3D piece that needs a loading bar has already lost most of its audience.
Open it and scroll. That is the whole proof.
More of the hard parts.
All work
The Halden: a photoreal launch site
A launch site for a fictional Brooklyn tower: scroll from the street to Residence 9C, then watch the sun set behind the glass.

VARNIKA: a skincare launch film
A 20-second launch film for VARNIKA, a skincare line we designed and built end to end in 3D: a rose serum, a night cream and one continuous shot.