Recipe: UI motion spec writer
Generate frame-level motion specs from natural language.
Overview
This recipe takes a plain-English description of a UI transition and outputs a structured motion spec — easing curves, durations, stagger delays, and property keyframes — ready to hand off to an animation library or Lottie tooling.
Input
"A card slides up 24px and fades in over 400ms with a gentle overshoot. Three cards stagger by 80ms each."
Output
{
"elements": [
{
"selector": ".card:nth-child(1)",
"delay": "0ms",
"duration": "400ms",
"easing": "cubic-bezier(0.34,1.56,0.64,1)",
"keyframes": {
"opacity": [0, 1],
"transform": ["translateY(24px)", "translateY(0)"]
}
},
{
"selector": ".card:nth-child(2)",
"delay": "80ms",
"duration": "400ms",
"easing": "cubic-bezier(0.34,1.56,0.64,1)",
"keyframes": {
"opacity": [0, 1],
"transform": ["translateY(24px)", "translateY(0)"]
}
},
{
"selector": ".card:nth-child(3)",
"delay": "160ms",
"duration": "400ms",
"easing": "cubic-bezier(0.34,1.56,0.64,1)",
"keyframes": {
"opacity": [0, 1],
"transform": ["translateY(24px)", "translateY(0)"]
}
}
]
}Prompt template
You are a motion-design engineer. Given a description of a UI animation, produce a JSON motion spec with: selector, delay, duration, easing (as a cubic-bezier string), and keyframes (opacity + transform only). Infer stagger from card counts. Use CSS-compatible values.
Notes
- Overshoot maps to a back-out easing:
cubic-bezier(0.34,1.56,0.64,1) - Stagger is computed as
index * staggerMs - Output is framework-agnostic — feed into Framer Motion, GSAP, or vanilla WAAPI.