Motion System
CSS-first motion primitives with reduced motion support.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/motionWhat It Gives You
- Motion tokens: Standardized durations and easings.
- AnimatePresence: JS-powered enter/exit animations.
- Transition: CSS transition wrapper for layout changes.
- Stagger: Simple staggered animations for lists.
- Reduced motion: Honors OS preferences by default.
MotionProvider
import { MotionProvider } from "@/components/systems/motion/motion-system"
<MotionProvider>
<App />
</MotionProvider>AnimatePresence
import { AnimatePresence } from "@/components/systems/motion/motion-system"
<AnimatePresence present={isOpen} enter="slideInUp" exit="fadeOut">
<Modal />
</AnimatePresence>Stagger
import { Stagger } from "@/components/systems/motion/motion-system"
<Stagger staggerDelay={60} animation="fadeIn">
{items.map((item) => (
<Card key={item.id} {...item} />
))}
</Stagger>API Reference
| Prop | Type | Notes |
|---|---|---|
| MotionProvider.tokens | MotionTokens | Override durations/easings |
| MotionProvider.forceReducedMotion | boolean | Force reduced motion |
| AnimatePresence.present | boolean | Enter/exit toggle |
| AnimatePresence.enter / exit | AnimationPreset | config | Animation preset |
| Transition.properties | string[] | CSS properties to transition |
| Stagger.staggerDelay | number | Delay between items |
| getAnimationClass | (preset, duration) => string | CSS utility class |