Magic UI 动效组件库
Magic UI
在 shadcn/ui 基础上扩展的动效组件库，50+ 动画展示组件：数字滚动、3D 进度条、光斑背景、刮刮卡交互，现代灵动。
功能概览
在 shadcn/ui 基础上扩展的动效组件库，50+ 动画展示组件：数字滚动、3D 进度条、光斑背景、刮刮卡交互，现代灵动。
- shadcn/ui 基础组件太朴素
- 需要数据可视化和动效展示
- 品牌页面缺视觉冲击力
使用场景
- 做数字滚动展示数据
- 做 3D 进度条和光斑背景
- 做刮刮卡等创意交互
- 让品牌展示区更有动感
适合谁用
- 做品牌官网的前端
- 需要数据可视化动效的人
- 追求创意表现力的设计师
不适合谁
- 做后台系统的人
- 不需要动效的人
普通人版解释
用大白话说这个库在 shadcn/ui 基础上加了 50 多个动效组件，比如数字滚动、3D 进度条、光斑背景。适合让品牌官网的展示区更有动感和冲击力。
专业版解释
给 Claude Code / Codex 用户Magic UI 是在 shadcn/ui 基础上扩展的动效组件库，提供 50+ 动画展示组件，比如数字滚动、3D 进度条、光斑背景、刮刮卡交互等，风格现代灵动，和品牌官网的展示型场景高度匹配。追求创意表现力、需要强视觉冲击力的品牌页面首选。
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
npx shadcn@latest add https://magicui.dev/r/number-ticker
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
- 1.请用 Magic UI 做数字滚动展示用户数
- 2.请用 Magic UI 做光斑背景的品牌区
- 3.请用 Magic UI 做 3D 进度条展示完成度
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 否 | 不建议新手 |
相关技能包
网页动画核心技能包
让 AI 正确使用 GSAP 核心 API：做网页动画、SVG 动画、React/Vue 动画时不再写错代码。
动画序列编排技能包
让 AI 正确编排多个动画的先后顺序：标题先入、副标题跟入、按钮最后入。
shadcn/ui 组件库
前端社区最火的 UI 方案，基于 Radix UI 无障碍组件 + Tailwind，复制粘贴即拥有全部代码，深度可定制。
Aceternity UI 特效组件库
主打视觉特效+微交互的组件库，200+ 发光卡片、视差滚动、文字渐显、3D 悬浮、Bento 网格，基于 Framer Motion。
滚动动画技能包
让 AI 做对滚动联动的网页动画：视差、滚动进度、钉住章节、滚动触发入场。
React 动画技能包
让 AI 在 React / Next.js 里正确使用 GSAP：useGSAP hook、清理、SSR 不报错。