Motion

Tune it

Every control below writes straight to the CSS variables on this document, so the components on this page — including the ones that render through portals — re-time as you drag. Nothing is saved; reload to get the shipped values back.

Using it in code

The duration steps are custom utilities, the easings are a Tailwind theme namespace. Both work with every variant, including the data-open and data-closed states Base UI exposes.

<Dialog.Popup className="
  data-open:animate-in   data-open:fade-in-0   data-open:zoom-in-92
  data-open:duration-slow  data-open:ease-overshoot
  data-closed:animate-out  data-closed:fade-out-0
  data-closed:duration-fast data-closed:ease-exit
" />

Because the easing tokens are declared with plain @theme rather than @theme inline, each utility emits var(--ease-…) instead of a baked-in curve. Redefine the variable on any wrapper and everything inside it takes on that feel — one marketing section can breathe more slowly than the app around it without forking a single component.

Travel & scale

How far a thing moves matters as much as how long it takes. These are deliberately small.

Rules

1. 1
   Duration and easing are class names, not numbers

   duration-base, ease-entrance. Tailwind v4 has no --duration-* theme namespace, so WunderUI ships the scale as @utility rules that also set --tw-duration — which means they work on animate-in and animate-out, not just on transitions.

2. 2
   Entrances decelerate, exits accelerate

   ease-entrance in, ease-exit out, and the exit is one step shorter on the duration scale. Never the entrance duration played backwards: the user already decided, and making them watch the decision play out is the most common motion mistake there is.

3. 3
   Only transform and opacity

   Everything else goes through layout or paint. Height animates via grid-template-rows: 0fr → 1fr, never via height — that is the one trick that works in every browser and stays on the compositor.

4. 4
   Restrain the travel

   Anything anchored to a trigger moves 2px or 4px. A menu that slides 20px does not look like it opened; it looks like it fell in.

5. 5
   One overshoot per screen

   ease-overshoot is punctuation. Two of them in one view and the interface reads as a toy. A dialog overshoots; a sheet that fills half the viewport does not.

6. 6
   Never transition-all

   Name the properties, or use bare transition, which covers color, shadow, transform and opacity but no layout property. transition-all animates things you never meant to animate, including on first paint.

7. 7
   Reduced motion is opt-in, not a kill switch

   Wrap the animation in @media (prefers-reduced-motion: no-preference) so the still state is the default. Written the other way round, you only have to forget one selector for someone to get motion they asked not to have.

What your agent gets

Everything on this page is also on the machine-readable side. The motion scale, the curves, the rules above and a set of copy-paste recipes ship inside DESIGN.md and design.json, so an agent generating a component against WunderUI reaches for duration-base the same way it reaches for bg-card — and produces motion that matches the rest of the system instead of the default it was trained on.