Motion Primitives: A Shadcn for React Animations

There's a React animation library that almost nobody knows about.

It's called Motion Primitives. It's extremely simple: copy a component from the docs, paste it into your app, get quality animations without writing a single keyframe.

You get scroll-triggered reveals, text blur effects, magnetic cursors, and morphing dialogs.

The entire core library is MIT licensed.

I spent an afternoon dropping these into my Next.js project and the results were impressive.

What Is Motion Primitives

Motion Primitives is an open-source UI kit built by a developer called ibelick. Animated React components that work with Motion (formerly Framer Motion) and Tailwind CSS.

30+ components across categories like core UI (Accordion, Animated Background, Carousel, Dialog, Infinite Slider), text effects (Text Effect, Text Morph, Text Scramble, Text Shimmer), number animations, interactive elements (Dock, Glow Effect, Spotlight, Tilt), and advanced effects (Magnetic, Morphing Dialog, Progressive Blur).

Each component ships with full documentation, live demos, and copy-paste code. One dependency: Motion.

Why This Matters

Motion just crossed 30 million monthly npm downloads. Companies like Framer, Figma, and Cursor use it in production. But writing Motion code from scratch requires understanding spring physics, layout animations, AnimatePresence, variants, gesture handlers. The learning curve is annoying and AI isn't the best at it.

Motion Primitives solves this. You get the full power of Motion packaged into components you can customize with Tailwind classes.

You grab the TextEffect component, set a preset like "blur-in", and you're done in two minutes.

The Text Effect Component

The component that sold me is TextEffect. It animates text character by character or word by word, with presets for different styles.

import { TextEffect } from './text-effect';
 
export default function Hero() {
  return (
    <TextEffect preset="fade-in-blur" per="word">
      Ship faster with beautiful animations
    </TextEffect>
  );
}
Live demo

Ship faster with beautiful animations

That's the entire implementation. Change preset to "slide", "scale", "fade", "blur", or "fade-in-blur" and you get completely different animations. Presets are type-safe.

Each word scales and blurs in sequentially. It's the kind of effect you see on high-end marketing sites and assume took hours to build.

Installation

The setup is minimal. You need a React project (Next.js recommended), Tailwind CSS, and Motion.

npm install motion

Then browse the docs at motion-primitives.com, and copy the code into your project. There's no package to install for the components themselves. You own the code just like shadcn/ui.

Free vs Pro

The core library is completely free and MIT licensed.

Motion Primitives Pro includes advanced templates, complex page layouts, and exclusive components aimed at teams shipping marketing sites quickly.

The free tier covers everything you need though.

Where It Fits in Your Stack

Motion is the foundation.

Motion Primitives sits on top. Shadcn/ui for animations.

What I'd Improve

Documentation is good but not exhaustive. Some components have limited examples and I had to read source code to understand all available props.

Some experimental presets (like the shake text effect) feel unfinished. The core presets are polished.

Also merging some animations together is very tricky.

Next Steps

Install Motion. Copy the code at motion-primitives.com/docs/text-effect. Use it in a hero section with preset="blur-slide-up" and per="word".

Your landing page hero goes from static text to a polished entrance animation.