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 →

4 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

Live demo

A seamless ribbon of type moves at a constant speed with a visible pause control.

Infinite marquee

Background· 23 sites

Live demo

A tiny cached texture adds film grain without regenerating pixels on every frame.

Grain and noise overlay

Background· 10 sites

Live demo

Three flat layers travel by different amounts to suggest depth without WebGL.

Parallax depth layers

Scroll · Background· 16 sites