Specify micro-interactions and animation for developers
Writes a precise motion spec for interactions: triggers, durations, easing, properties, and reduced-motion behavior engineers can build from.
The prompt
Help me write a motion and micro-interaction spec for developers.
Interactions to specify: [LIST - e.g. "like button tap", "bottom sheet open/close", "toast appears and dismisses", "list item swipe to delete"]
Purpose of each: [feedback / orientation / continuity / delight]
Platform and tech: [iOS, Android, web CSS, React Native, Lottie]
Existing motion tokens: [OUR DURATION AND EASING TOKENS - or "none"]
Brand feel: [e.g. calm and quick, playful]
For each interaction specify:
- Trigger (user action or system event) and any conditions.
- Elements involved and which properties change (opacity, transform, size, color), with start and end values.
- Duration in ms, delay, and easing (named curve or cubic-bezier values), using my tokens where they fit.
- Sequence or stagger for multiple elements.
- Interruption: what happens if the user acts again mid-animation.
- Reduced-motion alternative (respecting the OS setting), e.g. a fade instead of a slide.
- Accessibility notes: nothing that flashes more than 3 times a second; state changes announced to screen readers.
Guidance: keep most UI transitions roughly 100-300 ms, and avoid animating layout properties that hurt performance. If I have no tokens, propose a small set (e.g. fast, standard, slow; enter and exit easing).
Return one spec table per interaction and a short tokens table.
Highlighted [brackets] are blanks to replace with your own details.
Fill in the blanks and use this promptMore Product & UX Design prompts
What to fill in
- feedback / orientation / continuity / delight
- iOS, Android, web CSS, React Native, Lottie
- OUR DURATION AND EASING TOKENS - or "none"
- e.g. calm and quick, playful
How this prompt is built
This prompt follows the Few-Shot structure (Few-shot prompting). A few-shot prompt includes one or more worked examples of the input and the output you want, so the model can copy the pattern instead of guessing it.
Related prompts
- Write design handoff notes for developersA dev-ready spec: layouts, components, states, interactions, and edge cases.
- Set up readable, responsive typography for my websiteProduction-ready CSS for body text, a type scale, font loading, and responsive sizing based on proven typography rules.
- Write UX microcopy for buttons, errors, and empty statesClear, on-brand interface text for buttons, form errors, empty states, and confirmations.
- Write a screener to recruit the right research participantsBuilds a short screener survey that finds the right people for interviews or tests and filters out poor fits and professional testers.