Buttons with a Brain.
Motion and state micro-interactions for an AI generation workflow. Every transition communicates what the interface is doing.
Test every outcome of the interaction.
Generate an AI response
The random mode uses a simulated request with a 20% failure rate.
The button communicates each state visually.
Idle
Ready for interaction
Hover / Focus
Lift and focus feedback
Loading
Request is processing
Success
Generation completed
Error
Retry is available
Disabled
Interaction unavailable
Motion with a reason.
The goal isn't to decorate the button. Motion exists to make state changes understandable.
Fast enough to feel immediate while remaining visually smooth.
A small scale reduction gives the interaction physical feedback.
The label transitions into the loading state instead of snapping.
A softer entrance communicates completion without slowing the user.
One short shake attracts attention while the error state remains visible.
Compositor friendly
Motion primarily uses transform and opacity to avoid unnecessary layout work.
Accessible by default
Native button semantics, keyboard interaction, visible focus, and aria-busy state are preserved.
Interruptible
Async request IDs prevent stale operations from overwriting the current state.
Reduced motion keeps the feedback.
When prefers-reduced-motion is enabled, decorative movement is reduced while labels, icons, colors, focus states, loading feedback, success, and errors remain visible.