9 Copy-Paste Three.js Scroll Scenes That Turn Scrolling Into Cinema

9 Copy-Paste Three.js Scroll Scenes That Turn Scrolling Into Cinema

Most "scroll animation" on the web is a fade-in and a parallax layer. These nine are a different category entirely: a full WebGL scene where scrolling is the timeline — the camera flies, particles assemble, gears turn, sand falls — and scrolling back up runs the whole thing in reverse, frame for frame. Each one is built from Three.js and GSAP's ScrollTrigger, loaded straight from a CDN with no bundler and no build step, and every scene is fully reversible because nothing is a one-shot animation — every visual is a pure function of a single scrubbed progress value. Below: a particle galaxy collapsing out of dust, a camera falling into a black hole's accretion disk, a two-stage rocket flying to orbit with real stage separation, a phone exploding into labeled layers, a five-gear machine that obeys actual tooth-ratio physics, an hourglass that conserves sand volume with a cube-root law, a crystal cluster blooming shard by shard, a book whose pages genuinely bend as they t…