Adoption Curve
The adoption plot draws its S-curve from the origin up to the target rule while the side bar reads the same extent, then clears and draws again.
CSS
Designsystem
15 animationsBreaking Change
A version rail splits open at a major boundary and a migration arc draws across the gap, lighting the landing node when it touches down.
CSSBreakpoint Reflow
A layout reflows from one column to two to three and back as the breakpoint marker walks its stops along the ruler below.
CSSComponent States
A control pill runs its state cycle — hover lift, focus ring, pressed inset, rest — while a row of readout dots names the state it is in.
CSSContrast Check
Two swatch discs draw apart and back together while a ratio marker slides along a scale, the threshold rule lighting whenever the pair passes it.
CSSCorner Radius
A primitive sweeps its corner-radius token from fully rounded to square against dashed construction corners, the readout bar below tracking the value.
CSSCoverage Ring
A component-coverage ring unwinds to empty and sweeps back round to its target arc, the target tick lighting the moment the sweep reaches it.
CSSDensity Setting
A list packs from comfortable row pitch down to compact and opens out again as the density thumb runs its track.
CSSEasing Token
A marker rides the motion token's bezier inside its unit box, moving at a steady rate in time and an eased rate in value as the crosshair guides track it.
CSSElevation Tokens
Three surfaces sharing one footprint separate to their elevation offsets against a depth rule, then settle flat and lift again.
CSSShape Primitives
On the unit dot grid the base primitive cycles pill, square and circle, each shape contracting away as the next takes its place.
CSSTheme Swap
A diagonal theme edge sweeps across a component card, repainting it from one theme to the other while the chip underline below follows the swap.
CSSToken Scale Ramp
A caliper bracket steps rung by rung up a size-token staircase, lighting each rung as it measures it before retracing to the base unit.
CSSToken Tiers
A token resolves inward through its tiers — global, semantic, component — each nested frame lighting in turn until the value lands in the core.
CSSVariant Matrix
A selection crosshair steps through every cell of a three-by-three variant matrix, the chosen combination filling where the row and column bands cross.
CSS