Spore Drift
Bioluminescent spores (drifters, trailing filaments, and orbiting clusters) float upward on gusting wind with soft glow, depth parallax, and faint connective filaments. Move the cursor to push the wind.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Spore Drift".
Description: Bioluminescent spores (drifters, trailing filaments, and orbiting clusters) float upward on gusting wind with soft glow, depth parallax, and faint connective filaments. Move the cursor to push the wind.
Current settings: density = 1, wind strength = 1, glow = 1, hue = 160, color = Single, second hue = 300.
Tags: Canvas 2D, particles, organic, pointer-reactive, glow.
Requirements:
- Use requestAnimationFrame with a delta-time (dt) step, clamped to avoid jumps on tab switches.
- Render crisply: fully clear the canvas every frame (clearRect). Do NOT fake motion blur by painting a translucent background each frame, because that causes permanent 8-bit "ghost" burn-in. If you want trails, store each particle's recent positions and draw them as an explicit fading tail.
- If many short-lived particles are spawned, use an object pool (pre-allocate, reuse, swap-remove on death) to avoid GC pauses.
- Scale the backing store by devicePixelRatio (cap ~2) and handle resize.
- Pause when the tab is hidden or the canvas is off-screen; respect prefers-reduced-motion.
- Expose the listed settings as adjustable props/controls.