Motion
Motion
Patterns
Motion components
Composable product patterns built on Framer Motion — ready to copy into dashboards, marketing, and app chrome.
Composition
Pair these with static Foundry UI components. Animate the inner pieces (label, icon, pill) rather than the entire page shell.
Morphing submit
Idle → loading spinner → success.
Loading interactive preview…
Success path
SVG check draw for confirmations.
Loading interactive preview…
Segmented control
Sliding layoutId pill.
Loading interactive preview…
Metric ticker
Dashboard-friendly counters.
Loading interactive preview…
Toast stack
Enter/exit list with layout.
Loading interactive preview…
Sortable rows
Reorder.Group for priority lists.
Loading interactive preview…
Bottom sheet
Drag-to-dismiss mobile pattern.
Loading interactive preview…
Component checklist
- Asymmetric open/close (enter slower, exit quicker)
- Never animate from scale 0 — use 0.96–0.98
- Prefer opacity + transform (+ light blur only when needed)
- Honor reduced motion via MotionConfig
- Keep one primary moving element per interaction