Week 2 · Build sheet
Alice in Wonderland
Scroll drives a true 3D camera through seven procedural low-poly WebGL scenes — from the riverbank rabbit hole to the mad tea party, Queen's croquet court, and wake.
Stack
- Three.js r170 — ES modules via jsDelivr import map
- CatmullRomCurve3 — scroll position maps to camera path through 7 scenes
- Procedural geometry — low-poly meshes built in code, no GLB assets
- Vanilla JS —
scroll-world-3d.js, no build step, no npm - No Higgsfield / video — pure WebGL render loop
Cost & time
Higgsfield credits
0
Preview art
One social/OG still
Build time (estimate)
Most of an afternoon — camera path, seven scenes, mobile pass
npm installs
0
Story & scenes
Seven beats trace Alice's dream: riverbank with White Rabbit, falling rabbit hole, hall of doors, live flower garden, mad tea party, Queen's croquet ground, and waking on the bank. Each section has indexable copy panels alongside the WebGL canvas.
Week 2 upgrades the challenge from stills scrubbing to a real scroll-driven 3D camera — same challenge slug, different technical lane.
Accessibility
- Skip link, sr-only h1, keyboard-focusable HUD section nav
prefers-reduced-motion— text-only fallback panels, canvas de-emphasized- Visible focus rings on all interactive controls (WCAG 2.1 AA)
- Indexable HTML sections — not WebGL-only; copy readable without JavaScript
- Mobile-first HUD with 44px touch targets