J
JouberthAlves/motionshelf
Animated React components for sites that sell, each with a prompt that teaches your AI agent to rebuild it
无 SECURITY.md
在 GitHub 查看 ↗链接已于 2026-11-12 核查 · HTTP 200 · 打开的是厂商自己的官网
安装与配置
客户端配置（取自该仓库的安装命令）
{
"mcpServers": {
"jouberthalves-motionshelf": {
"command": "npx",
"args": ["shadcn@latest"]
}
}
}解析自我们于 2026-10-26 抓取的该仓库 README；我们未执行过。
command/args 来自仓库写明的安装命令；不确定时请以该项目 README 为准。
VS Code（.vscode/mcp.json —— 键名是 servers）
{
"servers": {
"jouberthalves-motionshelf": {
"command": "npx",
"args": ["shadcn@latest"]
}
}
}VS Code 顶层键是 <code>servers</code>，其余与上面那份相同。
Claude Code（命令行）
claude mcp add --transport stdio jouberthalves-motionshelf -- npx shadcn@latest
Claude Code 不收 JSON 文件，用这条命令直接加。
配置项的键名以你的客户端为准：客户端与 CLI
- ★ 数取值
- 2 ★ · JouberthAlves/motionshelf · 取自 GitHub 搜索 API · （2026-11-13 20:00:50 核对）
- 来源明细
- 从该仓库的 GitHub 页面直接读取 · 条目类型：开源项目
- 收录与活跃
- 收录于 2026-10-23 · 最近见到 2026-11-14 · 共见到 26 次 · 被 1 个来源列出
- 评分构成
- 综合分 103 · 2 ★ · 1 个来源 · repo
- 安装
npx shadcn@latest
常见问题（答案都来自我们的记录）
怎么安装？
该仓库给出的安装命令是
npx shadcn@latest。我们的记录里它是仓库自己提供的；不保证在你的客户端上直接可用。它适合谁 / 用来做什么？
我们把它归在这些标签下: 开源项目。标签来自条目自身，不是我们强加的分类。
谁维护它、还在更新吗？
仓库
JouberthAlves/motionshelf；我们收录于 2026-10-23；最近见到 2026-11-14。这里没有"官方认证"或"质量评级"——我们只记录来源与时间。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 |
收录徽章（可选）
想把收录标记放进 README 就复制这行，可选，不影响收录。
[](https://anclum.com/zh/s/jouberthalves-motionshelf/)
- 来源
- github · https://github.com/JouberthAlves/motionshelf
- 按领域浏览
- 开源项目
- Traction
- 2 ★
- 收录于
- 今天
- 安全策略
- 我们没在该仓库根目录找到
SECURITY.md（这不代表不安全）
同类推荐
所属领域与标签
每个标签都能点进去看同类的全部条目。数字是当前库里的真实条数。