← ClaudeAtlas

motion-primitiveslisted

Add polished, pre-built animations to React/Next.js apps using the motion-primitives component library (motion-primitives.com) — animated text reveals, number tickers, morphing dialogs, marquees, scroll reveals, hover effects. Use this whenever a task involves animating UI, making a landing page or hero section feel alive, animating numbers/KPIs on a dashboard, adding entrance/reveal animations, marquee/logo sliders, animated dialogs or popovers, shimmer/loading text states, or when someone says an interface feels "static", "flat", or "needs polish". Also use it to decide when NOT to animate. Always consult references/component-api.md for exact prop names before writing any motion-primitives code — the APIs here are extracted from source and several differ from what you'd guess.
shashidharbabu/claude-design-skills · ★ 0 · Web & Frontend · score 60
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