Pixelated cursor trail

A canvas-based cursor trail that reveals a pixelated grid as you move. Two modes: a normal trail, and a reveal mode where the grid only appears under the cursor.

How It Works

The grid is rendered to a <canvas> element. Each cell is a fixed-size colored block, and a separate trail map tracks which cells the cursor has passed over recently.

On every frame:

1. The trail map decays — each cell's "freshness" value drops slightly
2. Cells under the current cursor position get their freshness reset to full
3. The canvas redraws cells based on their freshness, with fully fresh cells at full opacity and decayed cells fading out

Click ripples are handled separately — on mousedown, a circular wave starts expanding from the click position, briefly boosting the freshness of cells it passes through.

Performance Notes

The trail and ripple state lives in a useRef rather than React state — updating thousands of cells per frame would trigger a re-render storm if it were in useState. The canvas reads directly from the ref on every requestAnimationFrame tick.

Mouse position is throttled to one update per frame to avoid wasted work when the browser fires more mousemove events than it can render.

Modes

• Normal — the trail follows the cursor and fades over ~600ms
• Reveal — the trail is invisible by default; cells only become visible under the cursor's current position