Three.js Scroll Galaxy Formation — Particle Spiral Effect

The Three.js Scroll Galaxy Formation snippet takes nine thousand points scattered as a chaotic dust cloud and, as the visitor scrolls through a pinned stage, lerps every single one of them into place along the arms of a rotating spiral galaxy. The whole effect is one THREE.BufferGeometry, one THREE.PointsMaterial, and a scrubbed GSAP tween — no per-particle mesh, no physics engine, just precomputed start and target positions and a per-frame interpolation.

One BufferGeometry, not nine thousand meshes

The naive approach to "thousands of particles" is to spawn a mesh per particle, but that means nine thousand draw calls, nine thousand transform updates, and a frame rate that collapses well before the effect looks good. Instead this snippet allocates a single flat Float32Array of length COUNT * 3 and hands it to THREE.BufferAttribute, so the GPU renders every particle in one THREE.Points draw call. Updating the whole galaxy each frame is just writing floats into that array and flipping posAttr.needsUpdate = true — the same technique used by the particle assembly snippet, applied here to a spiral rather than a logo shape.

Precomputing start and target, not simulating physics

Rather than running an N-body gravity simulation to make particles "fall" into a spiral — expensive and hard to make deterministic on scroll-reverse — every particle's chaotic starting position and its final spiral position are both computed once, up front, and stored in parallel arrays (startPos and targetPos). The animation loop then does nothing more than lerp(start, target, easedProgress) for every particle, every frame. Because both endpoints are fixed, scrolling backward simply lerps the other direction — full reversibility falls out of the math for free, exactly like the scrubbed camera value in the scroll tunnel snippet.

Logarithmic-style spiral arm placement

Each particle's target is generated with a biased random radius t (raised to a power so points cluster densely near the core, matching how real galaxy density falls off), assigned to one of four arms by i % ARMS, and given an angle that increases with distance from the core (armAngle + dist * 0.5 + sqrt(t) * 2.2). That distance-dependent angle term is what makes the arms sweep outward into recognizable spiral curves rather than straight spokes — it is a coarse approximation of a logarithmic spiral, cheap enough to compute nine thousand times without a lookup table.

Hue gradient from white-hot core to violet rim

Color is baked into the same geometry via a second BufferAttribute (color) and vertexColors: true on the material, so no shader is required. Each particle's color is interpolated between a warm near-white core tone, a blue mid-disk tone, and a violet edge tone based on the same t value used for its radius — meaning color and position are derived from one shared variable, so they always agree about which particles are "core" versus "rim" even as the galaxy assembles.

Additive blending for glowing dust

THREE.AdditiveBlending with depthWrite: false is what makes overlapping particles brighten instead of occlude each other, which is essential for a convincing dust-cloud look — normal alpha blending would make dense clusters look like flat gray smudges instead of glowing nebulae. This is the same blending trick used in the galaxy spiral ambient background snippet, but here it is combined with scroll-scrubbed formation instead of a static loop.

Smoothstep easing decoupled from the scrub

The raw scrubbed value form.t moves linearly with scroll position (GSAP's ease: 'none'), but the visual lerp applies its own t * t * (3 - 2 * t) smoothstep on top. This keeps the scrollbar mapping perfectly linear and predictable for ScrollTrigger's pin math, while still giving the particle motion itself an eased, physical acceleration-and-settle feel — two different easings serving two different jobs.

Rotation and camera pull-back tied to the same progress

Once the disk is mostly formed, the whole THREE.Points object spins slowly around Y, and the spin speed itself is scaled by eased * eased so a still-chaotic cloud never visibly rotates — only a recognizable galaxy does. The camera simultaneously pulls back and drops in height as eased climbs, ending on a tilted wide shot of the finished spiral, similar in spirit to the reveal camera move in crystal cluster.