Spatial tilt
RotateX / rotateY tracked to the pointer with a springy ease and a moving light highlight.
WebGL · three.js · scroll-driven
Motion that responds to how you move.
A live 3D object choreographed to your scroll, and cards that tilt in real space under the cursor. Built with three.js, tuned for performance, and fully reduced-motion aware.
Scroll to drive the scene
01 — Solar system
A sun, and worlds in orbit.
Planets resolve from the dark and circle the light.
02 — Orbits
Scroll drives the orbits.
Every pixel of scroll moves the camera and the worlds around the sun.
03 — Clouds & sun
Down into the sky.
Space gives way to a warm horizon — clouds drifting under the sun.
Pointer-driven · parallax depth
Cards with real depth, not drop shadows.
Each card tilts toward the cursor in 3D space; inner layers float at different depths for true parallax. Disabled automatically when reduced motion is requested.
Layered parallax
Title, icon and body sit at separate translateZ depths, so they shift independently as the card moves.
Accessible by default
Honors prefers-reduced-motion, keeps focus states, and never blocks interaction.
Built with three.js · Back to Cloudpeakify · Talk to us