Animation
GAMMA / MOTION SYSTEM
Motion with a purpose.
Explore loading states and small interactions. Tune the details, test the result, then open the component source.
01 / SPINNERS
View component Find the right rhythm.
Eight compact indicators share one API. Select a pattern, then adjust its pace, scale, and color.
PLAYGROUND
Orbit
02 / LOADING
Show what comes next.
Use placeholders to keep layout stable, and a progress bar when the amount of work is known.
03 / MICRO INTERACTIONS
Small responses, clear feedback.
Try each example. The motion reinforces what changed or where the pointer is going.
Entrance / 65 ms stagger
Pointer / focus / reduced motion
Ready when you are
Native button / physical depth
Follow the pointer
Pointer / settles on exit
Explore an effect.
Use real controls and content to compare each effect. Open its source when it fits your project.
POINTER / FOCUS
A useful detail
Move across the surface, or focus its action, to bring this reference into view.
A pointer-lit surface with the same accent for keyboard focus and a static reduced-motion treatment.
Each effect keeps content and actions available when reduced motion is requested.
04 / PRINCIPLES
A practical motion scale.
Keep animations short enough to support an action and quiet enough to leave the content in charge.
FAST120–180 ms
Press, hover, and focus response.
STANDARD240–400 ms
State changes and entering content.
CONTINUOUSPurposeful
Only for work that is still active.
Every pattern has a useful static state when reduced motion is requested.