Charge Burst
Click and hold to gather energy, then release. Time the release at the peak (the flashing sweet-spot ring) for a max-power burst with shockwaves. Overcharge too long and it goes unstable, scattering a weaker blast.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Charge Burst".
Description: Click and hold to gather energy, then release. Time the release at the peak (the flashing sweet-spot ring) for a max-power burst with shockwaves. Overcharge too long and it goes unstable, scattering a weaker blast.
Current settings: charge time (s) = 1.2, burst size = 140, spread = 1, gravity = 0.4, color = Dual, hue = 200, second hue = 300.
Tags: Canvas 2D, click, charge, hold, particles, pointer.
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.