src/lib/canvas-fx.js
Zero dependencies, no framework, on the site's own colour tokens. Each one parks its loop when it scrolls off screen or the tab goes quiet, and renders a single still frame for anyone who asked for reduced motion.
dots
A breathing grid with the cursor as a lens. Quiet enough to sit under a headline, and the only thing that moves fast is what you point at.
<CanvasFX effect="dots" /> waves
Plotter lines that fade at the top and bottom of the stack, lifting where the cursor passes underneath. One line carries the accent.
<CanvasFX effect="waves" color="--bg" /> flow
Particles walking a noise field, leaving trails that erase themselves. The cursor is a slow eddy, not a magnet, so nothing clumps.
<CanvasFX effect="flow" /> rings
Concentric arcs at different rates with widening gaps. Built for centred content: the rings frame it instead of running under it.
<CanvasFX effect="rings" color="--bg" /> topo
A real iso-line trace through a drifting noise field, so the lines merge, split and close into islands on their own. The cursor raises a hill under it.
<CanvasFX effect="topo" />