Every state below is live — hover, click, and focus each control to see the underlying motion. Purposeful transitions confirm actions, signal changes, and guide attention.
01 / Primary Buttons
Hover, active, loading, success
Click any button to run its loading → success cycle. Width is locked so nothing shifts.
small · 32px
medium · 42px
large · 52px
02 / Icon Buttons
Rotation, fill, bounce-back
Small controls, big feedback. Scale bounces confirm the tap landed.
plus
arrow
heart
settings
03 / Toggle Switches
Elastic pill, morph, gradient
Three takes on the same binary control.
Elastic pill{{ toggle1Label }}
Circle → square morph{{ toggle2Label }}
Gradient fill{{ toggle3Label }}
04 / Input Fields
Focus, error, success, disabled
Click into the first field. Use the replay buttons to re-trigger error and success states.
Focus
Error
Success
Disabled
05 / Cards
Lift, deepen, stagger
Hover a card — its contents reveal in sequence as the surface lifts.
Cycles
Plan and track work in focused sprints.
Triage
Route new issues to the right owner.
Insights
Spot bottlenecks before they slip.
06 / Toast Notifications
Slide in, auto-dismiss, click to close
Fires a toast with a live countdown. Click it to dismiss early.