Motion
Motion
CSS
Tokens & CSS
Foundry’s duration and easing tokens for CSS transitions. Use these for simple chrome; reach for Framer Motion when you need presence, layout, or gestures.
Next up
Explore the full Framer Motion catalog under Motion → Framer Motion.
Avoid
Never use
transition: all, scale from 0, or multi-second decorative loops on product chrome.Duration tokens
| Token | Duration | Use |
|---|---|---|
| --motion-micro | 80ms | Tooltip delay segments, badge ticks |
| --motion-quick | 150ms | Close, in-place swaps, hover |
| --motion-fast | 250ms | Open menu/modal, tab underline |
| --motion-medium | 350ms | Sheet dismiss |
| --motion-slow | 400ms | Panel open, skeleton reveal |
Easing tokens
- --ease-smooth
cubic-bezier(0.22, 1, 0.36, 1)
Primary product motion
- --ease-out
cubic-bezier(0.23, 1, 0.32, 1)
Exits and settles
CSS enter (fade + rise)
Keyframe recipe matching --motion-fast.
Fade + rise enter
Interaction recipes
Hover, press, and focus — CSS only.
Skeleton shimmer
Linear infinite for loading placeholders only.
Reduced motion
Always gate decorative motion. Framer Motion’s MotionConfig reducedMotion="user" respects the same preference in JS.