Name the motion

Precise words like stagger and crossfade get the motion you mean.

Emil Kowalski@emilkowalski
To get good animations from an AI you need to get good at telling it what you want: - "stagger this list of items" - "make this animation direction-aware" - "spacial consistency", "crossfade", "layout animation",

Shown in Demo 1: each of these terms plays its own loop. In Demo 2 you type them into a brief and watch the transition change.

Jun 1, 2026View on X ↗
Emil Kowalski@emilkowalski
This vocabulary is a side-effect of domain expertise. Having domain expertise makes you way better at getting what you actually want from AI relative to other people.

Shown in Demo 2: the vague brief and the named brief, side by side. Demo 3 lets you feel one term, rubber-banding.

Jun 2, 2026View on X ↗

From emil-design-eng and animations.dev/vocabulary.

Eight words, eight behaviors

Hover or tap a term to play it.

Same request, one word apart

Add a term to the brief, then press Next.

Step 1 of 3
“Make it smooth”Vague
opacity + translateY(8px), 300ms ease, both ways
Your briefGeneric
opacity + translateY(8px), 300ms ease

Feel one term: rubber-banding

Drag each card past the right edge and let go.

Hard stopClamped
overshoot: 0px
Rubber-bandedNamed
overshoot: 0px
function rubber(overshoot, dimension, c = 0.55) {
  return (1 - 1 / ((overshoot * c) / dimension + 1)) * dimension;
}

const x = raw > max ? max + rubber(raw - max, laneWidth)
        : raw < 0   ? -rubber(-raw, laneWidth)
        : raw;

onRelease(() => spring({ from: x, to: clamp(x, 0, max), velocity }));

Why it matters, pros and cons

Why it matters

“Make it smooth” leaves every choice to the default. A named behavior decides.

Pros

  • One word replaces a paragraph of spec.
  • Reviews get concrete and fixable.
  • AI output lands on the first try.

Cons

  • A term still needs a duration and a curve.
  • Jargon misfires on people who don't share it.
  • Naming motion can invite motion that shouldn't exist.