Flame Jet
A continuous jet of fire streams from the lower left and aims at your cursor, cooling from a white-hot core to yellow tips while shedding rising embers and thinning smoke. It sweeps slowly on its own when idle. Click to snap the aim and surge the flame.
Build a self-contained, performant Canvas 2D visual effect in a single React + TypeScript component.
Effect: "Flame Jet".
Description: A continuous jet of fire streams from the lower left and aims at your cursor, cooling from a white-hot core to yellow tips while shedding rising embers and thinning smoke. It sweeps slowly on its own when idle. Click to snap the aim and surge the flame.
Current settings: intensity = 1, reach = 1, spread = 0.32, embers = 1, color = Dual, hue = 18, second hue = 45.
Tags: Canvas 2D, fire, pointer-reactive, pooled, additive.
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.