Butterfly Garden
Butterflies drift across the canvas with flapping wings and wandering flight paths. Move your cursor to draw them in or scatter them, and tune the count, speed, and wing beat.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Butterfly Garden".
Description: Butterflies drift across the canvas with flapping wings and wandering flight paths. Move your cursor to draw them in or scatter them, and tune the count, speed, and wing beat.
Current settings: butterflies = 18, speed = 1, wing flap = 1, size = 1, pointer = Attract, color = Dual, hue = 40, second hue = 130.
Tags: Canvas 2D, particles, pointer-reactive, pooled, nature.
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.