Motion Primitives
Open-source React/Tailwind motion component kit by Ibelick, built on Motion, for adding polished animated primitives without inventing every transition from scratch.
Design Position
| Field | Value |
|---|---|
| Design family | Motion, effects, texture, and illustration |
| Use when | Use when motion, effects, texture, sound, or illustration depends on Motion Primitives. |
| System map | Design System Map |
| Proof path | Reduced-motion fallback, performance budget, and screenshot or video proof for the visual treatment. |
Routing Summary
Use Motion Primitives for editable React/Tailwind animated components when the desired interaction already exists as a reusable primitive. Copy/adapt locally, retokenize the motion and styling, then verify reduced-motion behavior in browser.
When to use it
Use Motion Primitives when a React/Tailwind product needs a concrete animated primitive: text reveal, transition wrapper, dock/menu treatment, hover card, image/visual transition, or small interactive motion system. It sits between low-level motion and highly stylized component galleries: more structured than writing Motion code from scratch, less visually opinionated than many effect libraries.
Load it after Design and Animation / Animation Vocabulary (Animations.dev) have named the motion intent and before custom implementation. Keep the copied component local, retokenize spacing/color/radius/timing, and verify reduced-motion behavior.
Routing
| Need | Route |
|---|---|
| General animated primitives in React/Tailwind | Start here, then adapt locally. |
| Core accessible behavior like dialog/popover/menu | Prefer Radix UI, Base UI, Cloudflare Kumo, or Astryx Design System first. |
| Strong visual effect backgrounds | Compare with React Bits, Fancy Components, and Shaders.com. |
| Scroll narratives or timeline choreography | Use GSAP / Anime / project-specific motion skill instead. |
Version Snapshot
| Field | Snapshot |
|---|---|
| Repo | ibelick/motion-primitives |
| Repo status | MIT, main, 5.6K stars / 219 forks as of 2026-06-29 |
| Package | motion-primitives@0.1.0 on npm |
| Release status | No GitHub releases observed; docs call the project beta |
| Last repo push checked | 2026-03-19 |
| Primary docs | https://motion-primitives.com/docs |
Source: GitHub API, npm registry, project README, 2026-06-29
Agent Rules
- Do not let the demo aesthetic ship unchanged.
- Prefer one motion family per viewport.
- Keep animation duration and easing aligned with Animation Vocabulary (Animations.dev).
- Add
prefers-reduced-motionfallbacks when motion changes layout, opacity, blur, scale, or scroll state. - Verify in the rendered browser. Motion code that looks plausible in source can still feel wrong.
Timeline
- 2026-07-01 | Design category refresh added this page to the Motion, effects, texture, and illustration family, linked it to Design System Map, and kept it standalone because Motion Primitives owns a distinct design decision surface in this family. Source: User request, 2026-07-01
- 2026-06-29 | Promoted Motion Primitives into the design/component source shelf with a version snapshot and routing rules for React/Tailwind motion primitives. Source: User request, 2026-06-29; GitHub
ibelick/motion-primitives; npmmotion-primitives