Magic UI 提供 150+ 动画组件，用于打磨 SaaS 落地页，定位为专业、可直接上线的组件集合。
用途：统计数字/计数器动画、Logo 墙（跑马灯）、Bento 网格布局、设备模型（iPhone、Safari）、文字动画（打字、词轮换）、微光/彩虹按钮。不适合基础 UI（用 shadcn/ui）、夸张首屏效果（用 Aceternity）、状态驱动动画（用 Rive）。
使用流程：识别组件类型（NEED）→ 安装（ADD）→ 自定义样式（CUSTOMIZE）。安装命令：npx magicui-cli@latest add [component]。依赖安装：npm install framer-motion clsx tailwind-merge。
组件类别：文字（number-ticker、typing-animation、word-rotate、flip-text、morphing-text）；按钮（shimmer-button、rainbow-button、pulsating-button、shiny-button）；图案（dot-pattern、grid-pattern、retro-grid、particles、meteors）；模型（iphone-15-pro、safari、android）；布局（bento-grid、marquee、dock、animated-list、file-tree）；特效（orbiting-circles、animated-beam、border-beam、confetti、globe）。
自定义：通过 CSS 变量调整速度（如 [--duration:40s]）与间距（[--gap:2rem]），按钮可传 shimmerColor、background 等属性。SSR 时组件需加 'use client'，重组件用 next/dynamic 并设 ssr:false，或用 mounted 检查模式。
排查：组件找不到时重跑 CLI 命令并检查 components/magicui/[name].tsx；动画不播放时确认 'use client' 与 framer-motion；水合不匹配用 dynamic 的 ssr:false；跑马灯卡顿可增大 [--duration] 或启用 pauseOnHover。
限制：文档与 API 以官方站点为准，收费、价格与具体平台支持情况暂未提供。