Motion

All animation is CSS: no animation library ships with the components. Popups animate in and out with transitions on the data-starting-style and data-ending-style attributes, which both frameworks set the same way, and wait for those transitions before unmounting.

Tokens

Token	Use
`--duration-fast / -normal / -slow`	120 / 200 / 300 ms: hovers, popups, larger panels
`--ease-standard, --ease-enter, --ease-exit`	Default, entering, leaving
`--ease-emphasized`	Long, soft deceleration for big movements (toast stacks)
`--ease-spring + --duration-spring`	A spring sampled into linear(): indicators, Switch thumb
`--motion-enter-scale / --motion-enter-offset`	How far popups scale and slide in

Animating your own parts

<div class="transition-[opacity,scale] duration-(--duration-normal) ease-standard
            data-starting-style:opacity-0 data-starting-style:scale-(--motion-enter-scale)
            data-ending-style:opacity-0
            motion-reduce:transition-opacity">

Reduced motion

With prefers-reduced-motion: reduce, nothing moves, scales or slides: the enter scale and offset tokens reset, indicators jump, and only opacity fades remain. Every component is tested for this. Add motion-reduce: rules when you add movement of your own.