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 turn, and a night city flyover with a banking camera. All nine are live, interactive previews — scroll them right here in the article — and every one exports to React, Vue, Angular, or Tailwind in one click from the snippet page.
Why these don't feel like typical "scroll effects"
- One number drives everything. Every scene here reduces to a single scrubbed value — 0 at the top of the section, 1 at the bottom — and derives camera position, particle placement, material state, and HUD text from it each frame. Nothing is a fired, one-way tween, which is exactly what makes scrolling back up replay the scene backwards for free.
- Physics over vibes. The gear train uses real tooth-ratio math. The hourglass scales sand piles by a cube root so volume is actually conserved. The galaxy's arms use a distance-dependent spiral angle. These aren't random spinning shapes — the motion is correct, which is what makes it read as a machine instead of decoration.
- Thousands of particles, one draw call. Where a scene needs a crowd — dust, exhaust, sand, city light streaks — it's one
THREE.BufferGeometrywith a flatFloat32Arrayrendered throughTHREE.Points, never one mesh per particle. That's the difference between 9,000 particles at 60fps and a frozen tab.
1. Three.js Scroll Galaxy Formation
Nine thousand points scattered as chaotic dust cloud lerp into a rotating four-armed spiral galaxy as you scroll — no physics engine, no per-particle mesh.
How it works: instead of simulating gravity, every particle's chaotic starting point and its final spiral-arm position are both precomputed once and stored in parallel arrays; the render loop just lerp()s between them by an eased progress value. The spiral shape comes from a distance-dependent angle (armAngle + dist * 0.5 + sqrt(t) * 2.2), and color is baked into a second BufferAttribute that gradients from white-hot core to violet rim using the same radius value that placed each particle — so color and position can never disagree. AdditiveBlending makes overlapping dust glow instead of muddying to gray.
Best for: observatory and science-education sites, album or music launches with a cosmic theme, and generative-art portfolios that want to visibly demonstrate the data structure as it forms. Tip: because start and target are fixed points, reversibility is free — scroll up and the galaxy dissolves back into scattered dust in exact reverse.
Grab the code: Three.js Scroll Galaxy Formation
2. Three.js Scroll Black Hole Approach
The camera falls toward a black hole ringed by a 5,200-particle accretion disk with real Keplerian orbital physics — inner particles genuinely lap the outer rim.
How it works: each disk particle stores only a radius and an angular velocity following the real Keplerian falloff, ω = 14 / r^1.5, so inner particles visibly outpace the rim exactly the way accretion physics demands — positions are recomputed from that formula every frame, never integrated, which keeps the scrub exact at any scroll speed. The event horizon itself is the cheapest mesh in the scene: a plain black MeshBasicMaterial sphere, which ignores all lighting by definition and reads as a literal hole in space against the glowing disk. A "time dilation" multiplier speeds the disk up to 12× as you approach, reported live in the HUD, while the camera's field of view creeps from 60° to 84° for the stretched, pulled-in feeling near the horizon.
Best for: sci-fi promos, dark-theme portfolio centerpieces, and any "gravity" brand metaphor — aggregators, data lakes, marketplaces that pull everything toward a center. Tip: pair it above the galaxy formation snippet for a two-act cosmic scroll story.
Grab the code: Three.js Scroll Black Hole Approach
3. Three.js Scroll Rocket Launch Sequence
A two-stage rocket flies from a rumbling launch pad through booster separation to orbit, with a sky that fades from dawn blue to a starfield as altitude climbs.
How it works: the scroll range is carved into a real mission profile — pre-launch, boost, a stage-separation window, then orbit burn — and every frame classifies the scrubbed value against those fractions to derive rumble amplitude, thrust level, and HUD phase text. Stage separation needs no re-parenting: the rocket is a Group holding a booster and an upper-stage child group, and after separation only the booster's local transform diverges (falling on its own curve, tumbling) while the parent keeps climbing with the upper stage. The 500-particle exhaust plume is gated entirely by a thrust scalar — it dies naturally at MECO and relights for the orbit burn with no explicit on/off switch anywhere in the code.
Best for: aerospace and launch-provider sites (the obvious literal fit), and startup "launch" landing pages where liftoff, stage separation, and orbit map neatly onto a countdown, feature tiers, and a closing CTA. Tip: the phase-table pattern here — one scrubbed value carved into named acts — is worth studying even if you never build a rocket; it's the cleanest way to sequence any multi-part scroll story.
Grab the code: Three.js Scroll Rocket Launch Sequence
4. Three.js Scroll Exploded Product View
A stylized phone peels apart into five labeled layers — frame, battery, logic board, display, cover glass — top-down, then the camera orbits the exploded stack for inspection.
How it works: the device is five stacked BoxGeometry slabs, not a downloaded 3D model, so there's no loader or asset URL to break the copy-paste promise. Each layer's separation distance is deliberately uneven rather than evenly fanned — real exploded diagrams give heavy parts more separation than thin films — and a per-layer progress offset makes the stack peel top-down, glass first, frame last, entirely reversible on scroll-up. The single scrubbed value splits at 55%: the first slice drives the explode, the rest sweeps the camera 150° around the separated stack, and a corner label names whichever layer the peel has just reached.
Best for: hardware and gadget product pages (the strongest trust signal hardware marketing has), SaaS architecture diagrams with layers renamed to your stack, and repair or teardown content. Tip: the chips on the logic board are parented directly to it, so they explode automatically — a good reminder that Three.js scene-graph parenting is the cheapest way to move sub-parts in lockstep.
Grab the code: Three.js Scroll Exploded Product View
5. Three.js Scroll Gear Train Mechanism
Five interlocking brass gears where scroll is literally the crank — every downstream gear rotates at its exact tooth-count ratio, counter-rotating at each mesh point like a real machine.
How it works: each gear is built procedurally from primitives — a disc, N tooth boxes placed around the rim, a hub, and dark wedges faking spoke cutouts — so tooth count is a real parameter, not decoration. The scrubbed value isn't an abstract 0–1 progress fraction, it's the driver gear's actual angle, tweened from 0 to 4Ï€; every downstream gear's angle is then computed by chaining angle × (teethPrev / teethCurrent) down the train and flipping direction at each mesh point, which is the actual kinematics of spur gears. A half-tooth phase offset on alternating gears keeps teeth interleaving cleanly through contact points instead of clipping through each other.
Best for: engineering and manufacturing sites where a mechanism that obeys real ratios signals precision, "how it works" process sections where each gear maps to a pipeline stage, and steampunk or heritage-craft brand pages. Tip: because ratios are parameter-driven, editing any gear's tooth count updates both the geometry and the motion coherently — it doubles as a live mechanism diagram.
Grab the code: Three.js Scroll Gear Train Mechanism
6. Three.js Scroll Hourglass Sand Timer
Sand runs through a glass with genuinely conserved volume — the top pile scales down while the bottom grows by the exact same cube-root law — then the whole instrument flips over at the end of scroll.
How it works: a cone scaled uniformly by s holds s³ of its volume, so naively scaling pile height linearly would make sand visibly evaporate mid-run. The correct mapping is scale = cbrt(fraction) — the top pile shrinks by cbrt(1 − run) and the bottom grows by cbrt(run), so their combined volume stays constant at every scroll position, and the top pile collapses dramatically near the end purely as a consequence of that math, exactly like a real hourglass. A 220-particle sand stream threads the neck with gravity-like acceleration and despawns right at the surface of the rising bottom pile. The final 12% of scroll smoothsteps the whole rig through a half-turn, resetting the timer upside down.
Best for: deadline and countdown campaigns where urgency should visibly accelerate near the end, and heritage or slow-craft brands (watchmakers, distillers) where patience is the message. Tip: the cube-root volume law is worth stealing any time you scale a container to represent "how full" something is — linear scaling will always look wrong.
Grab the code: Three.js Scroll Hourglass Sand Timer
7. Three.js Scroll Crystal Bloom
A single seed crystal grows into a cluster of roughly twenty refractive gem shards, each blooming outward in its own staggered window rather than popping in all at once.
How it works: each shard starts life as a plain low-poly icosahedron, non-uniformly stretched along one axis so the same faceted base shape reads as a crystal spike instead of a round gem, with zero extra vertices. Every shard stores its own reveal offset spread across most of the scroll range, so the same global progress value maps to a different local window per shard — the cascade comes from staggered offsets, not a scripted sequence, which is also why scrolling back up collapses the cluster in exact reverse order. Materials feature-detect MeshPhysicalMaterial's transmission property and fall back to a glossy standard material on older Three.js builds, so the effect degrades gracefully instead of erroring out.
Best for: jewelry and gemstone product pages, brand-story sections using growth or craftsmanship as a visual metaphor, and fantasy or RPG game sites for loot-reveal or spell-tree moments. Tip: the easeOutBack overshoot on each shard's scale-up is what sells the "snapping into place" feel — a plain linear scale reads as mechanical instead of springy.
Grab the code: Three.js Scroll Crystal Bloom
8. Three.js Scroll 3D Book Page Flip
An open book on a desk where scroll turns twelve pages one by one, each arcing over the spine with a genuine mid-flip paper bend and printed text lines that ride along.
How it works: a page needs to rotate around the book's spine, not its own center, and the snippet gets there with one line — translating the page's PlaneGeometry so its left edge sits at the local origin, which turns a plain rotation.z into the flip itself, no pivot group required. The paper bend is a half-sine vertex displacement, zero at the hinge and free edge and strongest mid-page, restored from a pristine copy of the flat geometry every frame so bends never accumulate. Pages don't turn strictly one after another either — each page's flip window overlaps the previous one by 65%, so two or three pages are visibly airborne at once, the way an actual reader leafs through a book, and the unflipped stack on the right visibly thins as the flipped stack on the left grows.
Best for: publishing, author, and bookstore sites, portfolios framed as a storybook with a project per spread, and wedding or event pages built as a turning guestbook. Tip: the printed lines are children of each page mesh, so they inherit its rotation for free — swap them for a CanvasTexture per page if you want real page content instead of placeholder strips.
Grab the code: Three.js Scroll 3D Book Page Flip
9. Three.js Scroll City Flyover
Scroll lifts the camera from street level up over a low-poly neon night skyline, banking gently as it climbs, with glowing windows built from a texture drawn entirely in code.
How it works: every building is a plain BoxGeometry box with randomized dimensions, arranged in twenty-six staggered blocks stepping back along Z so the flight path always has structures ahead. The lit-window look comes from a texture drawn at runtime with the 2D Canvas API — a grid of randomly lit warm or cool squares — wrapped as a tileable CanvasTexture and reused across every building at zero network cost, layered as a second transparent shell just outside each building's opaque body. The camera's position is a straight lerp between a low start and a high end point, but its vertical component runs through a separate smoothstep curve so the climb reads as a takeoff arc rather than a diagonal line, and a sine-based drift only kicks in once there's real altitude to bank at.
Best for: SaaS and startup landing pages opening on a "rising above it all" note, open-world game promos, and real estate or architecture sites previewing a development from the air. Tip: generating the window texture on canvas instead of loading an image means the lit-window ratio and color balance are one-line edits, not an asset-editing trip.
Grab the code: Three.js Scroll City Flyover
How to drop these into your project
- Open the snippet and hit View / Edit Code to see the HTML, CSS, and JS in separate tabs, plus the exact CDN script tags for Three.js and GSAP's ScrollTrigger plugin.
- Paste the HTML into your markup, the CSS into your stylesheet, and the JS before your closing
</body>tag — none of these nine need a bundler or a build step. - Prefer a component? Use the one-click export to React, Vue, Angular, or Tailwind right from the snippet page. In a framework, build the scene and register the ScrollTrigger inside a mount effect against a canvas ref, and dispose all geometries, materials, and the renderer — plus kill the ScrollTrigger instance — on unmount.
- Every scene is pinned to the viewport while its scroll section is active, so give it enough page height (each snippet's
endvalue, like+=450%) for the effect to breathe. Too short and the scrub feels rushed; too long and visitors scroll past before it resolves. - All nine scenes are stateless functions of one scrubbed value — resist the urge to add timers, one-shot tweens, or event listeners for "what happens next." Keep new behavior derived from that same progress value and reverse-scrolling stays correct automatically.
Final thought
What ties these nine together isn't the WebGL — it's the discipline of deriving every visual from one scrubbed number instead of firing a sequence of animations. That's what makes a 9,000-particle galaxy or a five-gear machine feel controllable rather than just decorative, and it's the same pattern worth carrying into your own scroll work even at a much smaller scale: pick the one thing that actually changes as the user scrolls, and derive everything else from it.
Preview any of them live, tweak the code, and export to your framework of choice in one click. Browse the full collection at FWD Tools UI Snippets — Scroll Effects — it's free and runs entirely in your browser.
