'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Foundations
Motion
Every animation in Alea is one of fourteen patterns, built only from the motion tokens. Motion explains what changed: where something came from, where the selection went, that a press was heard. With reduced motion, nothing travels; things still fade.
Patterns
The rest you can try by hand.
Pop pop
Anchored overlays grow out of what opened them, from the side they open on, and shrink away faster than they came.
Rise rise
Page-level overlays come up a little while the backdrop fades. Toasts rise with a small overshoot and leave to the side.
Slide slide
Panels come in from their edge and go back the same way.
Stagger stagger
The items of a list that just opened arrive one after another, so the eye reads them top down. Only the first ten wait.
Expand expand
Content opens to its own height, then fades in, so the layout below moves smoothly.
Glide glide
One indicator per group moves to the new item and takes its size, with a slight overshoot. You see where the selection went.
Hover me
It rises 2 px.
Lift lift
Surfaces you can click rise a little and cast a deeper shadow on hover.
Press press
Controls shrink slightly while pressed and spring back, so a tap feels answered.
Morph morph
An icon turns into its other state instead of swapping: chevrons rotate, checks pop in, the burger becomes a close icon, switches spring.
Tint tint
Hover and selection colors fade in very quickly; fast enough to feel instant, soft enough not to flicker.
Nudge nudge
A field that turns invalid shakes once, with the error text, so the problem is found without hunting.
Draw draw
Strokes and bars grow into place: progress, steps and chart lines.
Pulse pulse
Something live or new breathes slowly. It stops with reduced motion.
Shimmer shimmer
A sheen sweeps over placeholders while content loads.
Easings
--alea-motion-ease-out--alea-motion-ease-in-out--alea-motion-ease-standard--alea-motion-ease-emphasized--alea-motion-ease-inDurations, distances and scales
--alea-motion-duration-instant100ms--alea-motion-duration-fast150ms--alea-motion-duration-base250ms--alea-motion-duration-slow400ms--alea-motion-duration-slower600ms--alea-motion-distance-sm4px--alea-motion-distance-md8px--alea-motion-distance-lg16px--alea-motion-scale-from0.96--alea-motion-scale-press0.97--alea-motion-stagger24ms--alea-motion-lift-2pxReduced motion
- Distances, scales, the lift and the stagger go to zero: overlays and items fade in place, nothing travels across the screen.
- Slow durations shorten to base; the emphasized curve stops overshooting.
- Decorative loops stop (pulse, orbs, the indicator ping); the skeleton shimmer slows to 3 s. Spinners keep turning because they tell you something is happening.
- Nothing important waits for an animation: exits finish under 200 ms, and focus moves at once.
Rules for new components
- Use a pattern; if none fits, add one here first. Never a one-off keyframe.
- Enter with ease-out, exit with ease-in and faster than the entrance.
- Fade from 0.01, not 0, so the first paint counts.
- Only animate transform and opacity (and height for expand): no layout jank.
- In Figma, the same patterns are interactive components with Smart Animate on the ease-out curve.