interaction-design

Identify interaction nodes and output complete, runnable code with animations — click effects, icon transitions, error shakes, loading states.

What Problem It Solves

AI-written UIs are often static. interaction-design fills that gap — not just adding a transition, but identifying what animation fits each node, what easing curve to use, and for how long.

Covered States

• Trigger: hover, focus, active, click ripple
• Feedback: error shake, success bounce, warning pulse, loading spinner
• Transition: page enter sequence, element appear, content switch
• Skeleton: shimmer loading effect

Principles

CSS-first — only use JS for complex sequences or physics-based springs. For React, prefer the Motion library.

Example Prompt

Add a password visibility toggle to the login form with animation and error shake state