// live demo
Scrollscape
A pinned 3D icosahedron whose rotation, scale, camera dolly, and
wireframe color all scrub off a single scrollY input.
Three.js for the scene; pure JS for the scroll binding — no GSAP,
no ScrollTrigger.
- Three.js
- position: sticky
- scrollY-driven
- 0 deps beyond three
// scene 01
Static start.
The shape sits centered, slow ambient rotation, fully visible. No camera motion. Just a wireframe icosahedron.
// scene 02
Dolly in.
The camera pushes forward as you scroll. The shape spins faster on both axes. The wireframe gains a cyan accent.
// scene 03
Tilt off-axis.
The shape leans, scales up to fill more of the viewport. Color shifts toward acid yellow. Glitch on the wireframe opacity.
// scene 04
Pull out.
Camera dollies back, shape shrinks to a small distant glyph, color resets to hot pink. End-state.
// implementation
Single scroll input, four outputs.
Total page height is divided by the pin height to produce a
normalized 0–1 scroll progress. That progress drives camera
Z, mesh rotation rate, mesh scale, and wireframe color via simple
mix() calls. No keyframes, no breakpoints — just math.