ThinkWithPrompt by SynotticThinkWithPrompt

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.

Product & UX DesignFew-ShotStandardCodingWriteFill-in Template

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

Find more prompts like this