Techniques · 14 effects, taught

Effects, explained.

About the techniques

One effect per page: a live demo you can tune, how it works in plain steps, the code, and prompts for your coding agent. Where the library has measured it, the numbers come from real sites.

Techniques: 14
Measured: 2
Site links: 198

Demos are free. Code & prompts · Pro →

2 techniques

Live demo

One generated clip, dithered live into a two-tone dot field behind crisp type.

Dithered AI-background hero

Background · WebGL· 7 sites

WebGL image distortion hover: A picture that bends around the pointer, like a lens or a ripple, and splits its colour…

Live demo

A picture that bends around the pointer, like a lens or a ripple, and splits its colour as it moves.

WebGL image distortion hover

Hover · WebGL· 2 sites