A hero that catches fire under the cursor
How the landing-page character reveal works — a radial mask, a smoothed rAF loop, and a deliberate decision to keep it off the main thread's back.
The character on our landing page has two states: a calm version, and an on-fire version layered directly over it. Move your cursor across it and a soft spotlight reveals the fire underneath. It's the one flourish on an otherwise deliberately quiet site, so it had to feel good and cost almost nothing.
Reveal with a mask, not a second render
The trick is that both images are always painted. The fire layer just carries a CSS radial-gradient mask that's transparent everywhere except a circle around the pointer. Nudge the mask and the fire appears to move with the cursor — no canvas, no per-frame image work.
We drive the mask from a single requestAnimationFrame loop that eases the spotlight toward the pointer instead of snapping to it. That lerp is the whole reason it feels warm rather than twitchy.
Cheap, no canvas re-serialization — just a mask string written each frame.
Know when to switch it off
The effect bails immediately on two conditions: prefers-reduced-motion, and any device without hover. On a phone there's no cursor to chase, so instead of shipping a broken interaction we show the calm character and move on. That's the next thing on the list — giving touch devices their own way to light the character up.