Motion / Mesh gradient
Colour that moves with you
About this effect
four radial-gradient blobs drift away from the pointer over a base. two layers travel at different speeds, so the colour swings across the hero, while a canvas dot field lights up around it and fades out dot by dot.
the blobs are four radial gradients, painted once and moved with atransform. The near pair takes the full pointer offset and the far pair half, which gives the drift its depth. no blur filter (performance win). the dot grid is a canvas simulation. every cell’s reach and fade are baked from its position, dots wake within 240px of the cursor and fade at their own pace.
on a touch screen there is no cursor to drift against, so the blobs wander on their own with a css animation: one long compositor move per layer, nothing on the main thread. the dot grid follows a finger and is simplified for small screens — coarser grid, smaller reveal, no glow, half the frame rate. prefers-reduced-motion holds both still.