Particle Text Formation Hero

What this builds

A full-viewport hero section where thousands of particles start in a random scattered state, animate into a readable headline or logo shape, and disperse again as the user scrolls. The text positions are sampled from a hidden 2D canvas, each particle stores a "home" (text) position and a "scattered" position, and the animation interpolates between them.

• Three.js Points + BufferGeometry renders 10k-50k particles as point sprites
• Text positions sampled from a hidden canvas via getImageData() pixel scanning
• GSAP ScrollTrigger drives the formation/dispersion progress (0 = scattered, 1 = formed)
• Custom ShaderMaterial handles per-particle size, opacity, and color
• Additive blending creates the characteristic glow-where-particles-overlap look
• Particles drift with curl noise while scattered for organic motion

When to use / when not to

• Use when the hero moment is "chaos becomes order" -- particles forming a word, logo, or icon.
• Use when the brand can support a dark/dramatic hero (additive blending needs a dark background).
• Use when the text being formed is short (1-3 words, 6-20 characters). Longer text requires more particles and higher canvas resolution, which scales poorly.
• Do NOT use for ambient floating particles without a formation target. Use webgl-particle-systems directly.
• Do NOT use for CSS-animatable text reveals. Use hero-kinetic-typography instead; it is 100x lighter for text-only motion.
• Do NOT use on light backgrounds without switching to normal blending. Additive blending on white produces invisible particles.