Showroom · Build notes

How Mireille was made

Sixty thousand particles, each holding three addresses — dust, a swallow, and a name — with the scrollbar deciding how far every grain has traveled between them.

What it demonstrates

Scroll-driven particle choreography at a scale the CPU could never animate frame by frame. Every particle’s three homes are baked into vertex attributes at load; from then on the entire flock is moved by a single shader and two numbers derived from the scroll position. The literary dates in the captions are real — Mirèio, 1859; Gounod’s opera, 1864; Mistral’s Nobel Prize, 1904.

Techniques, honestly named

• Three homes per particle — starfield, swallow and word positions as vertex attributes; the vertex shader mixes between them with per-particle departure delays, so the flock streams into place instead of snapping.
• Shape sampling — the swallow (one filled canvas path) and the word (fillText in Cormorant Garamond) are painted on a hidden canvas, read back, and each particle is thrown at a random inked pixel.
• Blend after projection — the starfield lives directly in clip space so dust fills any screen, while the shapes are projected with a fit-to-view scale; because projection is linear, blending projected homes is exact.
• Motion in the shader only — drift while dust, a swirl bulge mid-transit, a faint breath once assembled, twinkle in the alpha; additive blending turns density into glow, and gold arrives with the word.
• Pointer wake — the cursor (or a finger) carries a soft displacement bubble through the flock at every stage of the morph: pointer position, radius and strength ride in as three uniforms, a smoothstep falloff measured in screen-height units parts the nearby grains, mouse speed widens the wake, displaced grains glow brighter, and smoothed scalars spring everything back — still zero per-particle JavaScript.
• Resilience — rendering starts immediately so the context is never idle (idle contexts get reclaimed), the display font hot-swaps in when ready, lost contexts rebuild from CPU-side arrays, reduced motion renders only on scroll with the wake disabled, and no WebGL gets a written fallback.

Recreate it