Skip to content

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 →

14 techniques

Dithered AI-background hero: One generated clip, dithered live into a two-tone dot field behind crisp type.

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

Dithered AI-background hero

+2

Background · WebGL· 7 sites

Lerp smooth scroll: Wheel scrolling that eases after the input, tuned by one number measured across the…

Wheel scrolling that eases after the input, tuned by one number measured across the library.

Lerp smooth scroll

+1

Scroll· 68 sites

Ease-out intro reveal: The page's first elements fade and rise into place in about 300 ms, on a curve measured…

The page's first elements fade and rise into place in about 300 ms, on a curve measured on real sites.

Ease-out intro reveal

+2

Intro · CSS only· 7 sites

Split-text mask reveal: Headlines that rise line by line out of invisible masks, the SplitText look without the…

Headlines that rise line by line out of invisible masks, the SplitText look without the library.

Split-text mask reveal

+2

Intro · Scroll· 23 sites

Liquid Glass dock: A floating dock that bends the page behind it like a lens, with a lit rim and…

A floating dock that bends the page behind it like a lens, with a lit rim and macOS-style magnification.

Liquid Glass dock

+1

Hover· 10 sites

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

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

WebGL image distortion hover

+2

Hover · WebGL· 2 sites

Pinned scroll chapters: A native-scroll stage holds its place while three editorial chapters slide through it.

A native-scroll stage holds its place while three editorial chapters slide through it.

Pinned scroll chapters

+1

Scroll· 11 sites

Horizontal scroll track: Vertical scroll moves a gallery sideways without taking over the wheel or touch.

Vertical scroll moves a gallery sideways without taking over the wheel or touch.

Horizontal scroll track

+1

Scroll· 3 sites

Label cursor follower: A decorative label follows a fine pointer while the real cursor and touch targets stay…

A decorative label follows a fine pointer while the real cursor and touch targets stay intact.

Label cursor follower

+1

Hover· 8 sites

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

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

Infinite marquee

+1

Background· 23 sites

Grain and noise overlay: A tiny cached texture adds film grain without regenerating pixels on every frame.

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

Grain and noise overlay

+1

Background· 10 sites

Stacking sticky cards: A short deck piles up through native sticky positioning, with a tunable top-edge offset.

A short deck piles up through native sticky positioning, with a tunable top-edge offset.

Stacking sticky cards

+1

Scroll· 4 sites

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

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

Parallax depth layers

+2

Scroll · Background· 16 sites

Scroll text brightening: A paragraph comes into full ink word by word as native scroll advances.

A paragraph comes into full ink word by word as native scroll advances.

Scroll text brightening

+1

Scroll· 6 sites