Three.js Scroll Tornado Vortex — GSAP Particle Funnel

The Three.js Scroll Tornado Vortex snippet gathers 2,600 dust particles scattered across a dark plain into a spinning, wandering tornado funnel as the user scrolls — complete with tumbling debris that lifts off only once the storm passes half strength, and a dispersal phase that lets the storm die at the end of the scroll. GSAP's ScrollTrigger scrubs one intensity value; the funnel itself is pure parametric math evaluated per frame.

Particles store parameters, not positions

The core design decision: no particle stores its position, velocity, or any integrated state. Each stores five permanent parameters — a height fraction in the funnel, an orbital phase, a radius jitter, a speed multiplier, and a scattered rest position on the ground — all generated by the seeded sin-hash used throughout this series (see the Rubik's cube assembly). Every frame computes each particle's funnel position from those parameters plus clock time, then lerps between rest position and funnel position by eased intensity. The tornado is therefore a pure function of scroll and clock: scrub to any point and the storm is exactly what it should be, with no simulation to diverge or explode.

The funnel profile is one function

The tornado's silhouette lives in a single line: funnelRadius(h) = 1.2 + h^1.6 × 14 — narrow at the ground, flaring wide at the top, with the 1.6 exponent controlling how "stalky" the profile looks. Angular speed also varies by height, 2.2 + (1 − h) × 3.2, so the base spins visibly faster than the crown, matching how real vortices conserve angular momentum as radius shrinks. Changing two numbers redesigns the storm.

An intensity arc with an ending

Rather than mapping scroll linearly to strength, intensity ramps 0→1 across the first 70% of scroll, holds full force through 85%, then falls back to zero over the final 15% — so the storm has a narrative arc: gathering, rampage, dispersal. The raw intensity passes through a smoothstep (i² × (3 − 2i)) before use, removing the velocity discontinuities at the ramp boundaries. The funnel core also wanders the plain on slow sine paths scaled by intensity, so a strong storm stalks while a weak one stays put — and the camera's look-at target tracks the wandering core.

Debris with a lift-off threshold

Twelve box-geometry debris chunks behave differently from dust: below intensity 0.5 they only tremble in place (a high-frequency positional shiver scaled by 1 − lift), and only above it do they lerp from their rest spots into the funnel's rotation, tumbling with accumulating rotation. That threshold creates the storm's most legible beat — the moment the ground itself starts coming apart — and demonstrates how one scrubbed value can gate qualitatively different behaviors, the way the voxel build gates per-block slices.

Atmosphere from light, fog, and camera

A cold point light above the funnel flickers with a sine tremor scaled by intensity, standing in for internal lightning; FogExp2 matched to the background swallows the plain's edge. The camera closes from 40 to 30 units and rises as the storm builds, on top of a slow permanent orbit — motion layering consistent with the rest of the series, like the ocean dive's sway. For a calmer take on scroll-gathered particles, compare the particle assembly snippet, which pulls points into a shape instead of a storm.