Motion your clients will ask for.
Animated React components for sites that sell, installed as code you own.
Website · Components · Installation · Make it with your agent
Payment notifications, chat flows, map pins, search results, booking slots, and isometric machines that explain a sales idea. Every component has a live preview, its source, its props, a one-line install, and a prompt that teaches your AI agent to rebuild it in your own project. English and Portuguese.
Components
The three Anatomy components are interactive isometric figures: move the pointer over them and the model behind them changes (ad budget, page weight), and the readout under the figure updates from the same numbers.
The six Buttons are real buttons with a small physics world around them: a drone that flies the button to the cursor, an arcade claw that grabs it, a rocket that launches it, a flying saucer that beams it up, a magnet that pulls it while iron filings trace the field, and letters that fall out and pile up. Each fills its nearest positioned container and is plain React with requestAnimationFrame, no animation library.
Install
Motionshelf is a shadcn registry. One command copies a component into your project, so it runs on your own React and Tailwind setup and you can change anything.
Requirements: React 19 (Next.js or Vite) and Tailwind CSS v4. Most components use GSAP; the CLI installs it for you.
npx shadcn@latest add https://motionshelf-pi.vercel.app/r/payment-notification.json
Swap payment-notification for any component's slug (it's in the URL of its page). Then use it:
import PaymentNotification from "@/components/motionshelf/payment-notification";
export default function Page() {
return <PaymentNotification amount={150} currency="BRL" locale="pt-BR" sender="Alex M." />;
}
Every component respects prefers-reduced-motion, pauses when it's offscreen, and keeps its example content generic, so you replace the texts with your own.
Make it with your agent
Don't want to install? Every component page has a Prompt tab. Paste it into Claude Code inside your project and your agent rebuilds the animation, adapted to your brand.
The prompt tells the agent which skill to load, asks for your texts, colors and language before it writes code, describes the animation step by step with its timings, lists the rules that keep a loop clean, and asks it to check the result. A second version, Other agents, tells Cursor, Codex, Gemini CLI and others how to load the same knowledge.
| Skill | What it's for | Install in Claude Code |
|---|
| GSAP skills (GreenSock, MIT) | Animation on the page: timelines, useGSAP | npx skills add https://github.com/greensock/gsap-skills |
| anatomy (MIT) | Isometric figures (the Anatomy components) | npx skills add wheresryan22/anatomy -g -a claude-code |
| HyperFrames (HeyGen, Apache-2.0) | Optional: turn the animation into an MP4 | claude plugin marketplace add heygen-com/hyperframesclaude plugin install hyperframes@hyperframes |
More in Make it with your agent.
How it works
- One source per component.
registry/motionshelf/<slug>/<slug>.tsx is what the site previews, what the Code tab shows and what the registry ships.
- Catalog.
lib/catalog.ts holds names, categories, codes, summaries and props (English and Portuguese) for the sidebar, search, gallery and pages.
- Prompts.
lib/prompts.ts keeps one recipe per component (what it looks like, the animation beat by beat, what to ask the user) and builds the Claude Code and Other agents prompts in both languages.
- Anatomy figures. The static drawing is generated with the anatomy skill into a
*-figure.ts file (SVG, CSS and the model's constants); the React component only moves the live parts on top of it.
- Registry build.
pnpm build runs shadcn build first and writes public/r/<slug>.json.
Tech stack
Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS v4 · GSAP 3 with @gsap/react · next-intl (/en, /pt) · shiki · cmdk (⌘K search) · three.js with React Three Fiber (the 3D devices on the home page) · Phosphor icons · deployed on Vercel.
Development
pnpm install
pnpm dev # http://localhost:3000
pnpm build # builds the registry, then the site
app/[locale]/ pages: home, /components, /components/[slug], /docs
components/site/ site UI: tabs, gallery, showcase, prompt panel, devices
registry/motionshelf/<slug>/ the components, as shipped by the registry
lib/catalog.ts component metadata (en/pt)
lib/prompts.ts Prompt tab recipes and builder
messages/ interface texts (en/pt)
Credits
- Hero background: Faulty Terminal from React Bits (MIT + Commons Clause), used as site decoration only. It is not part of the registry.
- Isometric figures drawn with the anatomy skill kit (MIT, © 2026 Ryan).
- Page Speed Gauge bounce curve: Google, Think with Google (2017).
- Animation by GSAP.
License
The components and this site's code are released under the MIT license.
