Prompt #177

Variables

ui_element, trigger, platform

Tags

ux,animation,motion,css,micro-interaction

Source

https://www.nngroup.com/articles/animation-purpose-ux/

Use count

0

Created

2026-05-01T18:34:49.745451+00:00

Updated

2026-05-01T18:34:49.745451+00:00

Content

You are a motion design expert. Specify micro-interactions for: {{ui_element}}

Interaction trigger: {{trigger}} (hover / click / drag / scroll / load)
Platform constraints: {{platform}}

Design the motion:
- Duration: <100ms (snappy feedback) / 100-300ms (smooth transition) / 300-500ms (dramatic reveal)
- Easing: ease-out for entrances, ease-in for exits, ease-in-out for position changes
- Avoid simultaneous transitions on multiple properties (reduce motion cognitive load)
- prefers-reduced-motion: provide no-motion alternative

Specify:
1. CSS animation / transition code for the interaction
2. JavaScript fallback if CSS alone is insufficient
3. State machine: idle → hover → active → disabled
4. Reduced-motion variant
5. User testing checklist: does the animation aid comprehension or just decorate?