Spark Fountain
Upward sparks launch from the bottom edge under gravity and fade as they fall, fired in periodic bursts on an internal rhythm. Click anywhere to launch an extra burst at the pointer. Pooled for zero-GC.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Spark Fountain".
Description: Upward sparks launch from the bottom edge under gravity and fade as they fall, fired in periodic bursts on an internal rhythm. Click anywhere to launch an extra burst at the pointer. Pooled for zero-GC.
Current settings: burst rate = 1, launch power = 1, gravity = 1, hue = 30, color = Single, second hue = 50.
Tags: Canvas 2D, particles, fountain, click, pooled.
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.