Skip to content
tileio

Menu

12 layers · 5 free

Interactive gradient backgrounds that answer the pointer

The pointer in these gradients is part of the material: the raindrop on still water, the fingertip on fogged glass, the magnet under the paper. Left alone, each one keeps moving on its own clock; touched, it reacts the way that material would.

Each is a fragment shader of about 2 KB with five or six parameters and five palettes. Behind content, keep the speed low so the copy stays in front, and let visitors find the pointer response on their own.

The 12 layers, in order

  1. A mesh gradient whose control points sit on springs: the nearest lunge toward the pointer, overshoot and settle. The classic mesh, made interactive.

  2. Raindrops on still water whose rings damp and interfere; the pointer is a drop that keeps falling where it rests.

  3. Colour behind a frosted pane; rubbing with the pointer opens a clear patch with a damp rim and the blobs sharp underneath.

  4. Droplets lensing blurred city lights at night, with the pointer wiping a clear patch on the window.

  5. Every grain is a dash following the field of a magnet; drag the pointer and the sheet realigns in a ripple.

  6. A drawn grid bent by a slow flow and pulled toward the pointer like a sheet with a weight on it, glowing where lines bunch.

  7. Wandering cells with thin membranes and glowing nuclei that crowd away when the pointer presses in.

  8. A plasma globe laid flat: boiling sine fields with filaments arcing from the centre to wherever the pointer touches.

  9. Sunlight through shallow water onto a pool floor; moving the pointer sends a ripple out from under it.

  10. Two inks blooming in still water, folding into each other as the pointer stirs them.

  11. Beads of mercury on a dark plate; the pointer draws one toward it and it rolls back to the others when you move away.

  12. Two gradients under a ribbed lens: sweep the pointer across and one picture swaps for the other, strip by strip.

Browse the full catalogue: Gradients

Related collections

All collections