Motion Primitives

by ibelick

Ready-to-copy animated components to bring a website to life.

6,531 stars GitHub MIT FreeOpen source

View on GitHub →

What it does

Buttons, cards, text effects, carousels, transitions
Built on Motion and Tailwind CSS, customizable
Add one component at a time, no heavy library

Install it

Requirements: A React or Next.js project with Tailwind CSS.

Install dependencies

npm install motion clsx tailwind-merge lucide-react

Add a component (e.g. text effect)

npx motion-primitives@latest add text-effect

The prompt for your agent

Paste it into your coding agent: it checks the requirements and installs it for you.

Claude CodeCodexCursorGemini CLIopencode

Prompt

Install Motion Primitives (https://motion-primitives.com/) on my machine.
1. Check the requirements: A React or Next.js project with Tailwind CSS. If anything is missing, tell me before installing anything.
2. Follow the official method:
- Install dependencies: npm install motion clsx tailwind-merge lucide-react
- Add a component (e.g. text effect): npx motion-primitives@latest add text-effect
3. Check that it works, then explain how to launch it and where to start.

Always review what your agent is about to run, especially install commands.