Motion
Shared transition classes for overlays, indicators, and color changes. Prefer CSS scale on centered modals so translate centering stays intact.
Examples
Centered popup
Overview
Import motion from @standard-ui/react (via component internals) or copy the class strings from the table below. All tokens include motion-reduce:transition-none.
tsx
import { motion } from "@standard-ui/react" <div className={cn(motion.backdrop, "fixed inset-0 bg-black/40")} />
Tokens
| Token | Use |
|---|---|
| motion.backdrop | Overlay fade (Dialog, Command, Drawer). |
| motion.popupCenter | Centered modals — scale + opacity. |
| motion.popupAnchor | Menus, select, tooltip — transform-origin from Base UI. |
| motion.accordionPanel | Height expand/collapse. |
| motion.tabsIndicator | Sliding tab underline / pill. |
| motion.colors | Hover and pressed color transitions. |
| motion.transform | Icon rotates and simple transforms. |
| motion.all | Generic all-properties transition (sparingly). |
Guidelines
Do
- Keep durations short (150–200ms)
- Use popupCenter for dialogs; popupAnchor for floating UI
Don't
- Don't animate translate on centered popups that already use -translate-x/y-1/2
- Don't skip reduced-motion handling