Davidwhyte / Experience
Hand-drawn worlds, one camera, one timeline.
davidwhyte.com/experience →
A single full-viewport WebGL2 canvas whose camera and world state are driven by Lenis-smoothed scroll. DOM "scenes" are tiny text overlays absolutely positioned over the persistent canvas — the 3D world is one continuous timeline, not a stack of pages. Paper-shader pipeline (matcap + LUTs + SDF text) makes every frame look hand-drawn.
01The trick
Scroll position is the master clock. One persistent three.js canvas mounts at
page boot and never rebuilds. Each "section" you scroll past is just an HTML overlay; the
camera path, lighting, and scene props all interpolate against
Lenis's smoothed scroll value. No unmount, no flash, no jank.
02Engine
- renderer
- three.js (WebGL2)
- scroll
- Lenis (smoothed virtual scroll)
- textures
- KTX2 + Basis transcoder
- color grade
- 3DL LUTs (dry.3DL ↔ ink.3DL)
- type
- SDF text atlas (crisp at any zoom)
- matcap
- baked normal-map shading
03Assets
- scene.glb
- ~186 KB (single GLB)
- LUTs (.3DL)
- 2 files, mood crossfade
- KTX2 atlas
- ~1.4 MB (transcoded at runtime)
- SDF text
- ~1.5 MB atlas
- matcap normal
- 1 PNG
- upfront budget
- ~10 MB
04The 20% Growuild ships
One pinned ScrollTrigger section + a fixed <canvas> + a
PNG sequence (60–90 frames) crossfaded by scroll progress. Layer Lenis on top, drop a CSS
paper-grain overlay, and a LUT-style filter: stack for the
color mood. 1–2 days build. Pitches as a S$169–269 add-on
on top of the $109–499 Growuild SKUs — no Three.js skill required to deliver the look.