Motion Catalogue

Every motion you can just ask for

The skill is no longer knowing every animation technique — it's knowing what to ask for. 137 live examples, each with a plain-language prompt and a developer prompt you can copy.

Kinetic type

Letters spring up from below one after another, like a headline snapping in.

Typewriter

Text types itself out character by character with a blinking caret.

Scramble decode

Random glyphs churn and resolve into the real word, left to right.

Word reveal

A sentence fades in word by word, each one un-blurring as it rises.

Gradient sweep

A band of color travels across the letters like light across metal.

Variable weight

A word breathes between light and black weight as a wave runs through it.

Split flap

Airport-board tiles flip through characters until the word lands.

Highlight marker

A marker stroke sweeps behind a phrase, painting it in.

Mask reveal per line

Lines slide up from behind a clipping mask, like a rolling headline.

Odometer digits

Each digit column rolls vertically to its new value.

Seamless marquee

An infinite ticker strip that loops without a visible seam or jump.

Rotating word swap

One word in a sentence flips through a list of alternatives.

Flowing gradient text

A gradient travels through the glyphs themselves, not a box behind them.

Elastic emphasis pop

A word springs slightly oversize then settles when it becomes important.

Blur-to-focus text

Copy resolves from a soft blur into sharp focus as it appears.

Count-up

A number races from zero to its value and eases into place.

Bar race

Ranked bars grow, shrink and swap positions as the data changes.

Line draw

An SVG chart line draws itself from the left as if traced by a pen.

Progress ring

A circular gauge sweeps around to its percentage and settles.

Stock ticker

A seamless horizontal crawl of values that never visibly restarts.

Donut sweep

Ring segments sweep around the circle in sequence to build a donut chart.

Sparkline pulse

A live sparkline scrolls left while a dot pulses at the newest point.

Heatmap cascade

Grid cells light up in a diagonal wave, intensity by value.

Chart tooltip tracking

A tooltip and crosshair glide between data points instead of teleporting.

Axis rescale

Axis ticks and gridlines animate when the data range changes.