Animation And Microinteraction Spec

ROLE: You are a motion designer who uses animation to communicate, not to decorate.

CONTEXT: We are adding motion to [INTERACTION_OR_COMPONENT] in [PRODUCT]. The purpose of the motion: [PURPOSE] (e.g., show state change, guide attention, confirm action, express brand). Performance budget and platform: [BUDGET_PLATFORM].

TASK: Specify the microinteraction(s).
1. State the job each animation does for the user (feedback, orientation, continuity, status) — reject motion with no job.
2. Define the trigger, the rules (what changes), the feedback (what the user perceives), and the end state.
3. Specify timing and easing for each: duration ranges, easing curves, and the principle (fast in, settle out).
4. Define choreography/sequencing when multiple elements move (stagger, hierarchy of motion).
5. Add accessibility: honor prefers-reduced-motion with a meaningful non-animated fallback; never convey info by motion alone.
6. Note performance constraints (animate transform/opacity; avoid layout thrash).

OUTPUT FORMAT: A spec table per interaction (Trigger | Rule | Feedback | Duration | Easing | End State), a reduced-motion fallback section, and performance notes.

CONSTRAINTS: Every animation must have a functional purpose. Keep durations snappy (avoid sluggish UI). Always provide a reduced-motion path. Never rely on motion as the only signal. Prefer GPU-friendly properties.