---
name: "@motion-primitives"
slug: "motion-primitives"
description: "Motion Primitives is a curated open-source library of beautifully designed, easy-to-integrate motion components built with Motion (formerly Framer Motion) and Tailwind CSS, distributed via shadcn CLI. The components directory ships primitives focused purely on animation and transition behaviors — including Blur Fade, animated transitions, gestures, and layout effects — rather than full UI widgets. Designed as a complement to shadcn/ui, not a replacement. MIT licensed; actively developed with regular new component releases. Use for: layering production-quality entrance animations, shared layout transitions, and gesture-driven interactions onto components that already exist in a shadcn/ui project."
category: "Animated components"
tags: ["aesthetic", "animation", "backgrounds", "design-system", "forms", "hooks", "loaders", "media", "navigation", "overlays", "pro-available", "text-effects"]
framework: "react"
license: "MIT"
author: "ibelick"
website: "https://www.motion-primitives.com"
github: "https://github.com/ibelick/motion-primitives"
registry: "https://motion-primitives.com/c/registry.json"
pro: true
pro_url: "https://pro.motion-primitives.com/"
github_stars: 5655
component_count: 33
generated_at: "2026-09-21T01:50:16.753Z"
---

# @motion-primitives

Motion Primitives is a curated open-source library of beautifully designed, easy-to-integrate motion components built with Motion (formerly Framer Motion) and Tailwind CSS, distributed via shadcn CLI. The components directory ships primitives focused purely on animation and transition behaviors — including Blur Fade, animated transitions, gestures, and layout effects — rather than full UI widgets. Designed as a complement to shadcn/ui, not a replacement. MIT licensed; actively developed with regular new component releases. Use for: layering production-quality entrance animations, shared layout transitions, and gesture-driven interactions onto components that already exist in a shadcn/ui project.

## Links

- Website: https://www.motion-primitives.com
- GitHub: https://github.com/ibelick/motion-primitives
- Registry JSON: https://motion-primitives.com/c/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/motion-primitives
- This file: https://sh4dcn.vercel.app/md/motion-primitives.md
- Pro / pricing: https://pro.motion-primitives.com/

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://motion-primitives.com/c/registry.json
pnpm dlx shadcn@latest add https://motion-primitives.com/c/registry.json
bunx shadcn@latest add https://motion-primitives.com/c/registry.json
# clone the source repo
git clone https://github.com/ibelick/motion-primitives.git
# fetch the raw registry index
curl -s https://motion-primitives.com/c/registry.json
```

## Components (33)

| name | type | description | install |
| --- | --- | --- | --- |
| accordion | registry:ui | A collapsible content component with smooth animations for showing and hiding content. | `npx shadcn@latest add https://motion-primitives.com/c/accordion.json` |
| animated-background | registry:ui | A component that provides animated background effects for UI elements. | `npx shadcn@latest add https://motion-primitives.com/c/animated-background.json` |
| animated-group | registry:ui | A container component that applies coordinated animations to a group of child elements. | `npx shadcn@latest add https://motion-primitives.com/c/animated-group.json` |
| animated-number | registry:ui | A component that animates number changes with smooth transitions. | `npx shadcn@latest add https://motion-primitives.com/c/animated-number.json` |
| border-trail | registry:ui | An effect that creates animated border trails around elements on interaction. | `npx shadcn@latest add https://motion-primitives.com/c/border-trail.json` |
| carousel | registry:ui | A component for cycling through elements with smooth transitions. | `npx shadcn@latest add https://motion-primitives.com/c/carousel.json` |
| cursor | registry:ui | A custom cursor component with animated effects and interactions. | `npx shadcn@latest add https://motion-primitives.com/c/cursor.json` |
| dialog | registry:ui | A modal dialog component with smooth entrance and exit animations. | `npx shadcn@latest add https://motion-primitives.com/c/dialog.json` |
| disclosure | registry:ui | A component that shows and hides content with animated transitions. | `npx shadcn@latest add https://motion-primitives.com/c/disclosure.json` |
| in-view | registry:ui | A component that triggers animations when elements enter the viewport. | `npx shadcn@latest add https://motion-primitives.com/c/in-view.json` |
| infinite-slider | registry:ui | A slider component that loops infinitely through its content. | `npx shadcn@latest add https://motion-primitives.com/c/infinite-slider.json` |
| transition-panel | registry:ui | A panel component with smooth transitions between different states. | `npx shadcn@latest add https://motion-primitives.com/c/transition-panel.json` |
| text-effect | registry:ui | A component that applies animated effects to text content. | `npx shadcn@latest add https://motion-primitives.com/c/text-effect.json` |
| text-loop | registry:ui | A component that cycles through different text phrases with animations. | `npx shadcn@latest add https://motion-primitives.com/c/text-loop.json` |
| text-morph | registry:ui | A component that morphs between different text strings with smooth transitions. | `npx shadcn@latest add https://motion-primitives.com/c/text-morph.json` |
| text-roll | registry:ui | A component that animates text with a rolling effect. | `npx shadcn@latest add https://motion-primitives.com/c/text-roll.json` |
| text-scramble | registry:ui | A component that creates a scrambling text effect during transitions. | `npx shadcn@latest add https://motion-primitives.com/c/text-scramble.json` |
| text-shimmer | registry:ui | A component that applies a shimmering effect to text. | `npx shadcn@latest add https://motion-primitives.com/c/text-shimmer.json` |
| text-shimmer-wave | registry:ui | A component that creates a wave-like shimmer effect on text. | `npx shadcn@latest add https://motion-primitives.com/c/text-shimmer-wave.json` |
| magnetic | registry:ui | A component that creates a magnetic attraction effect on hover. | `npx shadcn@latest add https://motion-primitives.com/c/magnetic.json` |
| morphing-dialog | registry:ui | A dialog that morphs from its trigger element with smooth transitions. | `npx shadcn@latest add https://motion-primitives.com/c/morphing-dialog.json` |
| morphing-popover | registry:ui | A popover component that morphs from its trigger with fluid animations. | `npx shadcn@latest add https://motion-primitives.com/c/morphing-popover.json` |
| dock | registry:ui | A macOS-style dock component with scaling and movement effects. | `npx shadcn@latest add https://motion-primitives.com/c/dock.json` |
| glow-effect | registry:ui | A component that creates a glowing effect on elements based on cursor movement. | `npx shadcn@latest add https://motion-primitives.com/c/glow-effect.json` |
| image-comparison | registry:ui | A component for comparing two images with an interactive slider. | `npx shadcn@latest add https://motion-primitives.com/c/image-comparison.json` |
| toolbar-dynamic | registry:ui | A toolbar component with dynamic appearance based on user interaction. | `npx shadcn@latest add https://motion-primitives.com/c/toolbar-dynamic.json` |
| toolbar-expandable | registry:ui | An expandable toolbar that reveals additional options with animations. | `npx shadcn@latest add https://motion-primitives.com/c/toolbar-expandable.json` |
| progressive-blur | registry:ui | A component that applies progressive blur effects to elements. | `npx shadcn@latest add https://motion-primitives.com/c/progressive-blur.json` |
| scroll-progress | registry:ui | A component that visualizes scroll progress with animated indicators. | `npx shadcn@latest add https://motion-primitives.com/c/scroll-progress.json` |
| sliding-number | registry:ui | A component that transitions between numbers with a sliding animation. | `npx shadcn@latest add https://motion-primitives.com/c/sliding-number.json` |
| spotlight | registry:ui | A component that creates a spotlight effect following cursor movement. | `npx shadcn@latest add https://motion-primitives.com/c/spotlight.json` |
| spinning-text | registry:ui | A component that animates text with a spinning rotation effect. | `npx shadcn@latest add https://motion-primitives.com/c/spinning-text.json` |
| tilt | registry:ui | A component that applies 3D tilt effects to elements based on cursor position. | `npx shadcn@latest add https://motion-primitives.com/c/tilt.json` |

## For AI agents

```text
You are adding components from @motion-primitives to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/motion-primitives.md) for the component list.
2. Fetch the machine-readable index: https://motion-primitives.com/c/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: motion-primitives).
```