Motion

Duration, easing, spring, and stagger tokens for consistent, editorial-tempo animation. Import from @repo/ui.

Durations

Token	Seconds	Milliseconds	Use Case
`durations.instant`	0.1	100	Color changes, icon toggles
`durations.fast`	0.15	150	Button hover, tab indicators
`durations.normal`	0.2	200	Modal entrance, popover
`durations.moderate`	0.3	300	Accordion, page transitions
`durations.slow`	0.4	400	Chart animations, layout shifts

Each bar slides to full width at its duration tier.

instant (100ms)

fast (150ms)

normal (200ms)

moderate (300ms)

slow (400ms)

Easings

Token	CSS Value	When
`easings.default`	cubic-bezier(0.16, 1, 0.3, 1)	General entrance
`easings.in`	cubic-bezier(0.4, 0, 1, 1)	Elements leaving
`easings.out`	cubic-bezier(0, 0, 0.2, 1)	Elements entering
`easings.inOut`	cubic-bezier(0.4, 0, 0.2, 1)	Repositioning on-screen
`easings.spring`	cubic-bezier(0.34, 1.56, 0.64, 1)	Overshoot emphasis

Ball slides across the track with each easing curve (300ms).

default

out

inOut

spring

Springs

Token	Config	Use Case
`springs.snappy`	stiffness 500, damping 30	UI responses
`springs.gentle`	stiffness 200, damping 20	Layout animations
`springs.smooth`	duration 0.3	Size changes
`springs.bouncy`	stiffness 400, damping 10	Emphasis / celebration

Click a box to see its spring preset in action.

Stagger

Token	Per-item delay	Use Case
`stagger.fast`	20ms	Table rows, dense lists
`stagger.normal`	40ms	Card grids, metric cards
`stagger.slow`	60ms	Onboarding, feature showcase
`stagger.maxTotal`	400ms	Hard cap for total stagger time

12 blocks staggered at stagger.normal (40ms each).

Variant Presets

fadeUpItem / fadeDownExit

Fade + translate-y for list items

fadeUpItem

scaleIn

Scale + fade for modals and dialogs

scaleIn

slideIn

Directional slide from any edge

slideIn("up")

Import Reference

import {
  durations, durationsMs, exitDuration,
  easings, easingsCss,
  springs,
  stagger, staggerDelay,
  fadeUpItem, fadeDownExit, scaleIn, staggerContainer, slideIn,
} from "@repo/ui";

import { useMotionSafety } from "@repo/ui";