Motion and reduced motion

How components animate

• CSS first. Hovers, presses, focus rings, accordions and sheets use CSS transitions, so they cost nothing until they run and work in Server Components.
• Keyframes from the registry. Components with a looping or entrance animation (Marquee, Shimmer Text, Rating, Typewriter, Date Picker…) ship their @keyframes with the install: the shadcn CLI adds them to your global CSS. Names start with ux- so they never clash with yours.
• Motion for React where layout moves. Shared-layout effects — the tab indicator, the segmented control's thumb, rows making room in a sortable list — use Motion. The CLI installs it for the components that need it.

/* Added to your global stylesheet by the shadcn CLI when you install Marquee */
@keyframes ux-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

Timing

Most state changes take 150–300 ms with an ease-out curve (cubic-bezier(0.22, 1, 0.36, 1)), so things arrive quickly and settle gently. Springs are used where something is thrown or dragged. Entrance effects play once by default. Anything that loops pauses for you: Marquee on hover and keyboard focus, a looping Typewriter on hover.

Reduced motion

Every component checks prefers-reduced-motion. When it is set, transitions become instant, entrance effects show their final state, loops stand still (Marquee becomes a scrollable row) and text effects render as plain text. Nothing is hidden or removed: the information is the same, only the movement goes.

// What components do with the user's setting, in one line each:
className="transition-transform motion-reduce:transition-none"   // CSS
const reduce = useReducedMotion()                                   // Motion for React

To check a component, turn on Reduce motion in your operating system's accessibility settings, or emulate it in Chrome DevTools (Rendering → Emulate CSS media feature). Each component's page lists exactly what it does under Accessibility.

Tuning motion

Durations and delays that matter are props — duration on Marquee and Shimmer Text, typingSpeed on Typewriter, stagger on Blur Text — and every one is a control in the Studio. Because the source is yours, you can also change any class directly.