Anatomy of a good AI prompt for UI motion
Most prompts fail at motion. This guide dissects the five parts every motion prompt needs — trigger, property, curve, duration, and reduced-motion fallback — with before/after examples.
7 min read
The five parts that matter
A model can't see the animation in your head. What it can implement is a spec. Every prompt in the vault is built from the same five parts, and any prompt you write yourself should be too.
- Trigger — what starts it: hover, scroll position, page load, in-view intersection.
- Property — what visually changes: transform and opacity only whenever possible (GPU-cheap); width/height/top/left only when unavoidable.
- Curve — the easing: a named cubic-bezier, a spring stiffness/damping pair, or a stagger interval. "Smooth" is not a curve.
- Duration — with a number. 200ms feels instant, 600ms feels deliberate, 1000ms feels broken.
- Fallback — what happens under prefers-reduced-motion (usually: final state, no transition).
Before and after
Bad: "make the cards animate nicely on hover." The model picks something — usually a scale(1.05) with the default easing — and you iterate five times to fix it.
Good: "Cards lift on hover: translateY(-6px) over 250ms with cubic-bezier(0.22, 1, 0.36, 1), shadow deepens from 0 8px 24px rgba(0,0,0,.15) to 0 16px 40px rgba(0,0,0,.25) over the same interval; on pointer-down settle to translateY(-2px) in 120ms. Under prefers-reduced-motion show no transform, keep the shadow change." Same effort to write, one iteration to ship.
Where to steal working examples
The vault's prompts are all written in this shape, and each one has been validated by regenerating the live preview from the prompt alone. The fastest way to learn the pattern is to read a few high-scoring ones.
✦Spring Physics Ball DropA full spring spec — stiffness, damping, mass — written out in prompt form.✦Stagger Timeline GridStagger intervals done right: per-item delay math in the prompt, not left to the model's guess.The reduced-motion part is not optional
Vestibular disorders make parallax and bounce genuinely painful for some users, and accessibility audits fail sites without the fallback. One sentence in your prompt buys you both — and it's the sentence most people skip.
Next time you write a prompt, run it through the five parts. If a part is missing, the model will improvise — and you'll be the one paying for the improvisation in review cycles.