motion-primitiveslisted
Install: claude install-skill shashidharbabu/claude-design-skills
# Motion-Primitives
Motion-primitives is a copy-in-source animation component library (same
philosophy as shadcn/ui) built on **Motion for React** (`motion`, the successor
to framer-motion) and Tailwind. 33 components across six categories: core
containers, text effects, number effects, interactive elements, toolbars, and
advanced effects. MIT licensed, by @ibelick.
**Why it's good:** it occupies the layer shadcn deliberately doesn't — the
expressive/delight layer. shadcn gives you accessible structure; motion-primitives
gives you the animated moments (a headline that reveals, a KPI that rolls, a
thumbnail that morphs into a fullscreen preview). Because components are copied
into your repo, they're editable and there's no runtime dependency beyond
`motion` itself — no version treadmill, no lock-in.
## Setup (once per project)
Prerequisites: Tailwind, then:
```bash
npm install motion lucide-react
# lib/utils.ts must exist with the cn() helper (clsx + tailwind-merge)
```
Add components one at a time — either CLI works, both copy source into
`components/motion-primitives/` (path configurable):
```bash
npx motion-primitives@latest add text-effect
# or via shadcn CLI:
npx shadcn@latest add "https://motion-primitives.com/c/text-effect.json"
```
If CLI/network is unavailable, copy the component file directly from
`github.com/ibelick/motion-primitives` → `components/core/<name>.tsx`. Imports
use `motion/react` (not `framer-motion`).
**Per-component dependencies (verified by