Animation & motion

Fast and purposeful. Every transition stays under 300ms, spring physics handle interactive elements, and every animation respects reduced motion preferences.

Reduced motion

Press feedback

Every button scales down on press for tactile feedback via a fast CSS transform transition.

Spring indicators

Interactive indicators use spring physics for natural momentum. Click between tabs to feel the spring settle.

Easing direction

Match the easing curve to the motion: entering decelerates, exiting accelerates.

ease-outEntering: Decelerates into place

ease-inLeaving: Accelerates off-screen

ease-in-outMovement: Travels across the screen

linearConstant: Progress bars, spinners

Note: Slowed to 800ms so you can see the curves; the real durations are in the motion roles below. Most UI uses ease-out for both entering and exiting (exits just run faster). Reserve ease-in for elements leaving the screen entirely.

Motion roles

Two roles, each a duration plus an ease-out curve. Components pick a role by class name, never a number.

Role	Classes and use	Value
Small	`duration-small ease-small`Control feedback (hover, press, focus, check, switch), tooltips, and every surface on its way out.	150ms
Large	`duration-large ease-large`A surface coming in (popover, menu, select, dialog, sheet, drawer) and disclosure (a chevron turning, a panel opening).	200ms

Note: Popups open on large and close on small: duration-large ease-large data-[ending-style]:duration-small data-[ending-style]:ease-small. The tokens are --transition-duration-small, --ease-small, --transition-duration-large and --ease-large. Set one in your own CSS and every component on that role follows; a typed duration-150 in a component cannot be retuned that way. The one exception is a bar that tracks a value (Progress, the Stepper fill): it moves for 300ms with ease-in-out. Nothing runs longer than that.

Component motion audit

The kit's animated components and the motion config behind each.

Component	Interaction	Type
Button	Press feedback: `active:scale-[0.98]`	CSS
Tabs	Pill slide: `bounce: 0.1`	Spring
Shimmer	Shimmer loop: `linear, repeat`	Framer
Tooltip	Enter and exit: `duration-small ease-small`	Base UI
Popover	Enter and exit: `large in, small out`	Base UI
Dropdown	Enter and exit: `large in, small out`	Base UI
Dialog	Enter and exit: `large in, small out`	Base UI
Alert Dialog	Enter and exit: `large in, small out`	Base UI
Switch	Thumb slide: `duration-small ease-small`	CSS
Collapsible	Expand and collapse: `height 200ms open, 150ms close`	Height
Card	Content grow: `animateHeight 200ms`	Height

Note: Almost everything moves only transform and opacity, the two properties the browser composites on the GPU, so they never force layout. The one sanctioned exception is height, used for disclosures (Collapsible, Card animateHeight): it's clipped by overflow and collapses instantly under reduced motion.

Next steps

Design principles

Core rules for spacing, depth, text, and motion.

Components

Browse all components with live previews and install commands.

Shimmering text

Continuous shimmer effect for headings and labels.

Layout Tokens Design Principles