Create Website Animations With Motion Primitives

Go to https://motion-primitives.com/docs — this is the main docs page. It lists every available component: Accordion, Animated Background, Animated Group, Border Trail, Carousel, Cursor, Dialog, Disclosure, In View, Infinite Slider, Transition Panel, Text Effect, Text Loop, Text Morph, Text Roll, Text Scramble, Text Shimmer, Text Shimmer Wave, Animated Number, Sliding Number, Dock, Glow Effect, Image Comparison, Scroll Progress, Spotlight, Spinning Text, Tilt, Toolbar Dynamic, Toolbar Expandable, Magnetic, Morphing Dialog, Morphing Popover, Progressive Blur. Each component page has a live code preview — read those pages to understand the exact props, usage, and import patterns before using any component.

Run npx shadcn@latest init and accept defaults — Motion Primitives installs through the shadcn CLI

Install these components. Pattern: npx shadcn@latest add "https://motion-primitives.com/c/[name].json"

• text-effect
• text-loop
• in-view
• tilt
• morphing-dialog
• infinite-slider
• magnetic
• glow-effect
• sliding-number
• spotlight
• animated-background
• border-trail

After installing, read every component file in src/components/ui/ before using it. Cross-reference with the docs page at motion-primitives.com/docs/[component-name] to see the intended usage pattern and code examples. This library is newer than your training data — do not assume prop names, read the actual source and the docs.

If you need an effect none of these cover, check the full list on the docs page first. If a matching component exists that I haven't installed, tell me the name and I'll install it. Do not hand-write your own Motion animations.