micro-interaction-designer

Purpose

Enhance user interfaces with purposeful, delight-driven micro-interactions, responsive hover states, smooth spring physics, and loading state animations that communicate system feedback without distracting from tasks.

When to Use

• Polishing a functional but static-feeling user interface.
• Designing button states (default, hover, active, loading, success, error).
• Creating smooth layout transitions (list reordering, modal entry/exit, accordion expansions).

What to Analyze

1. Trigger: User interaction (click, hover, focus, drag) vs system event (data arrival, background completion).
2. Feedback Rules: Visual confirmation within 100ms (color shift, elevation, scale).
3. Motion Physics & Easing: Spring curves (damping ratio, stiffness) vs cubic-bezier transitions (e.g. cubic-bezier(0.16, 1, 0.3, 1)).
4. Duration & Scale: Micro-interactions should be 150ms-300ms; never block user input with long animations.
5. Reduced Motion Accessibility: Support @media (prefers-reduced-motion: reduce) gracefully.

Output Format

• Interaction Specification: Trigger, duration, easing function, and transform properties.
• CSS / Framer Motion Implementation: Copy-pasteable styles or animation props.
• Accessibility Fallback: Reduced-motion variant.

Avoid

• Slow animations (>400ms) that make the application feel sluggish.
• Gratuitous bouncy effects on high-frequency workflow buttons.