J
JouberthAlves/motionshelf
Animated React components for sites that sell, each with a prompt that teaches your AI agent to rebuild it
no SECURITY.md
View on GitHub ↗Link checked 2026-11-12 · HTTP 200 · opens the vendor's own site
Install & config
Client config (built from the install command this repo gives)
{
"mcpServers": {
"jouberthalves-motionshelf": {
"command": "npx",
"args": ["shadcn@latest"]
}
}
}Parsed from the README we fetched on 2026-10-26; we have not executed it.
command/args come from the install command the repository states. When it is ambiguous, the project README wins.
VS Code (.vscode/mcp.json - the key is servers)
{
"servers": {
"jouberthalves-motionshelf": {
"command": "npx",
"args": ["shadcn@latest"]
}
}
}Same server, but VS Code keeps it under <code>servers</code>.
Claude Code (command line)
claude mcp add --transport stdio jouberthalves-motionshelf -- npx shadcn@latest
Claude Code does not read a config file; add the server with this command.
Key names differ by client: Clients & CLI
- Star count
- 2 ★ · JouberthAlves/motionshelf · read from the GitHub search API · (checked 2026-11-13 20:00:50)
- Source
- read directly from its GitHub page · type: open-source project
- Harvest history
- first seen 2026-10-23 · last seen 2026-11-14 · seen 26× · listed by 1 sources
- Score
- score 103 · 2 ★ · 1 sources · repo
- Install
npx shadcn@latest
FAQ (answers come from our records)
How do I install it?
The repository provides this install command:
npx shadcn@latest. It comes from the repository itself; we cannot guarantee it runs as-is in your client.Who is it for?
We filed it under these tags: 开源项目. The tags come from the entry itself, not a taxonomy we imposed.
Who maintains it?
repository
JouberthAlves/motionshelf；first catalogued 2026-10-23；last seen 2026-11-14。There is no official certification or quality rating here — we record sources and dates only.Motion your clients will ask for.
以下摘录自该仓库的 README（片段） · 在 GitHub 读完整 README →
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
Payment Notification Commerce
Chat Flow Messages
Map Pin Drop Location
Title Reveal Text
Rotating Word Text
Before and After Text Text
Question Typer Messages
Appointment Reminder Messages
Search Ad Commerce
Slot Booking Scheduling
Sales Funnel Anatomy
ROI Balance Anatomy
Page Speed Gauge Anatomy
Add to Cart Commerce
Plan Toggle Commerce
Offer Countdown Commerce
Review Card Social proof
Order Tracker Location
Drone Button Buttons
Claw Machine Buttons
Rocket Launch Buttons
UFO Abduction Buttons
Magnet Buttons
Falling Letters Buttons
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.
bash
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:
tsx
import PaymentNotification from "@/components/motionshelf/payment-notification";
export default function Page() {
return ;
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 |
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
Payment Notification Commerce
Chat Flow Messages
Map Pin Drop Location
Title Reveal Text
Rotating Word Text
Before and After Text Text
Question Typer Messages
Appointment Reminder Messages
Search Ad Commerce
Slot Booking Scheduling
Sales Funnel Anatomy
ROI Balance Anatomy
Page Speed Gauge Anatomy
Add to Cart Commerce
Plan Toggle Commerce
Offer Countdown Commerce
Review Card Social proof
Order Tracker Location
Drone Button Buttons
Claw Machine Buttons
Rocket Launch Buttons
UFO Abduction Buttons
Magnet Buttons
Falling Letters Buttons
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.
bash
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:
tsx
import PaymentNotification from "@/components/motionshelf/payment-notification";
export default function Page() {
return ;
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 |
Listed badge (optional)
Copy this line into the README if you want the listing mark. Optional, and it does not affect being listed.
[](https://anclum.com/en/s/jouberthalves-motionshelf/)
- Source
- github · https://github.com/JouberthAlves/motionshelf
- Browse by field
- Open source
- Traction
- 2 ★
- added
- today
- Security policy
- no
SECURITY.mdat the repository root (which does not mean it is unsafe)
More like this
Filed under
Every tag opens the full list for that filter. Counts are the live catalogue figures.