Paint trail grid

Use it for

• A landing page hero that should invite play before any copy is read
• Brand moments for a friendly, colourful product

Avoid

• Behind dense text or forms, where the tiles compete with content
• Pages that already have another ambient animation

How it works

A canvas is divided into cells. Pointer moves raise an energy value for cells inside a brush radius, and a requestAnimationFrame loop decays that energy, drawing each live cell as a rounded square whose size and alpha follow it. A click paints a wider patch and launches pooled confetti with gravity. After 2.6 seconds without input an idle brush circles the stage so the canvas is never empty.

Accessibility

The canvas is aria-hidden and the copy stays real text above it. Reduced motion draws one static stroke and runs no loop. Touch moves are ignored so scrolling never paints, but a tap drops a patch and the idle brush keeps the demo alive on phones. The loop stops when the demo is off screen.