Skip to content

Motion

Animate your interface with shared timing, speed controls and reduced-motion support.

Use shared durations, curves, springs and stagger steps to animate your own elements. YoujProvider controls speed and reduced motion across them. This section covers those settings and the animation tools that use them. For ready-made UI, see Components.

Foundations

Motion principles
The rules behind every piece, shown as live pairs.
Motion tokens
Every duration, easing, spring and stagger step, with the time scale and reduced motion.
Motion playground
Every spring, tween, stagger, personality and preset on a stage, with the code it takes.
Motion in your components
useYouj, the provider and the CSS utilities, for motion of your own.
Overlay presets
CSS utilities that animate Base UI's popovers, dialogs, sheets and toasts.

Sound has a section of its own: components emit cues as their motion starts, and @youj/sound plays them.

Pieces

Primitives
Reveals, text, numbers, loops and scroll: small pieces you wrap around your content.
Transitions
The motion inside components: gliding indicators, morphing labels, height and lists.
Entrances
Build real UI in front of the viewer, part by part, ending on the real thing.