Back to Details

frontend-magic-ui

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Magic UI

Magic UI

150+ animated components for SaaS landing pages. Professional polish, production-ready.
150+ 适用于SaaS着陆页的动画组件，经过专业打磨，可直接用于生产环境。

When to Use

适用场景

  • Number/stat animations (tickers, counters)
  • Logo walls (marquee)
  • Bento grid layouts
  • Device mockups (iPhone, Safari)
  • Text animations (typing, word rotate)
  • Shimmer/rainbow buttons
  • 数字/数据统计动画（滚动器、计数器）
  • Logo墙（跑马灯效果）
  • 便当式网格布局
  • 设备样机（iPhone、Safari）
  • 文字动画（打字机、文字轮换）
  • 闪光/彩虹按钮

When NOT to Use

不适用场景

  • Basic UI → shadcn/ui
  • Dramatic hero effects → Aceternity
  • State-driven animations → Rive
  • 基础UI组件 → shadcn/ui
  • 炫酷首屏英雄区效果 → Aceternity
  • 状态驱动型动画 → Rive

Process

使用流程

NEED → ADD → CUSTOMIZE
  1. Identify component type
  2. Install: 
    npx magicui-cli@latest add [component]
  3. Customize props/styles
需求→添加→定制
  1. 确定组件类型
  2. 安装：
    npx magicui-cli@latest add [component]
  3. 定制属性/样式

Dependencies

依赖项

bash
npm install framer-motion clsx tailwind-merge
bash
npm install framer-motion clsx tailwind-merge

Component Categories

组件分类

yaml
Text:       number-ticker, typing-animation, word-rotate, flip-text, morphing-text
Buttons:    shimmer-button, rainbow-button, pulsating-button, shiny-button
Patterns:   dot-pattern, grid-pattern, retro-grid, particles, meteors
Mockups:    iphone-15-pro, safari, android
Layout:     bento-grid, marquee, dock, animated-list, file-tree
Effects:    orbiting-circles, animated-beam, border-beam, confetti, globe
yaml
Text:       number-ticker, typing-animation, word-rotate, flip-text, morphing-text
Buttons:    shimmer-button, rainbow-button, pulsating-button, shiny-button
Patterns:   dot-pattern, grid-pattern, retro-grid, particles, meteors
Mockups:    iphone-15-pro, safari, android
Layout:     bento-grid, marquee, dock, animated-list, file-tree
Effects:    orbiting-circles, animated-beam, border-beam, confetti, globe

Decision Tree

决策树

yaml
Need animated component?
  ├─ Stats/numbers → number-ticker
  ├─ Logo carousel → marquee
  ├─ Feature grid → bento-grid
  ├─ CTA button → shimmer-button, rainbow-button
  ├─ App screenshot → safari, iphone-15-pro
  ├─ Dynamic headline → word-rotate, typing-animation
  └─ Integration diagram → orbiting-circles, animated-beam
yaml
Need animated component?
  ├─ Stats/numbers → number-ticker
  ├─ Logo carousel → marquee
  ├─ Feature grid → bento-grid
  ├─ CTA button → shimmer-button, rainbow-button
  ├─ App screenshot → safari, iphone-15-pro
  ├─ Dynamic headline → word-rotate, typing-animation
  └─ Integration diagram → orbiting-circles, animated-beam

Quick Patterns

快速示例

tsx
// Number Ticker
<div className="flex gap-12">
  <NumberTicker value={10000} className="text-4xl font-bold" />
  <span className="text-4xl">+</span>
</div>

// Marquee (logo wall)
<Marquee pauseOnHover className="[--duration:20s]">
  {logos.map(logo => <img key={logo.name} src={logo.img} />)}
</Marquee>

// Word Rotate
<h1>Build <WordRotate words={["faster", "better"]} /> apps</h1>

// Safari Mockup
<Safari url="yourapp.com" src="/screenshot.png" />
tsx
// Number Ticker
<div className="flex gap-12">
  <NumberTicker value={10000} className="text-4xl font-bold" />
  <span className="text-4xl">+</span>
</div>

// Marquee (logo wall)
<Marquee pauseOnHover className="[--duration:20s]">
  {logos.map(logo => <img key={logo.name} src={logo.img} />)}
</Marquee>

// Word Rotate
<h1>Build <WordRotate words={["faster", "better"]} /> apps</h1>

// Safari Mockup
<Safari url="yourapp.com" src="/screenshot.png" />

Customization

定制方法

tsx
// Speed via CSS variables
<Marquee className="[--duration:40s]">...</Marquee>
<NumberTicker className="[--duration:3s]" value={1000} />

// Colors
<ShimmerButton
  shimmerColor="#a855f7"
  background="linear-gradient(to right, #6366f1, #8b5cf6)"
>
  Custom
</ShimmerButton>

// Marquee gap
<Marquee className="[--gap:2rem]">...</Marquee>
tsx
// Speed via CSS variables
<Marquee className="[--duration:40s]">...</Marquee>
<NumberTicker className="[--duration:3s]" value={1000} />

// Colors
<ShimmerButton
  shimmerColor="#a855f7"
  background="linear-gradient(to right, #6366f1, #8b5cf6)"
>
  Custom
</ShimmerButton>

// Marquee gap
<Marquee className="[--gap:2rem]">...</Marquee>

SSR & Hydration

SSR 与 水合渲染

tsx
// Always 'use client'
'use client'

// Heavy components: dynamic import
import dynamic from 'next/dynamic'
const Globe = dynamic(() => import('@/components/magicui/globe'), { ssr: false })

// Mounted check pattern
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />
tsx
// Always 'use client'
'use client'

// Heavy components: dynamic import
import dynamic from 'next/dynamic'
const Globe = dynamic(() => import('@/components/magicui/globe'), { ssr: false })

// Mounted check pattern
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return <Skeleton />

Magic UI vs Aceternity

Magic UI 与 Aceternity 对比

Use CaseMagic UIAceternity
Number animation✓ NumberTicker✗
Logo carousel✓ Marquee✓ InfiniteMovingCards
Hero spotlight✗✓ Spotlight
Device mockup✓ Safari/iPhone✗
3D card tilt✗✓ 3D Card
Rule: Magic UI = polished SaaS, Aceternity = dramatic effects
适用场景Magic UIAceternity
数字动画✓ NumberTicker✗
Logo轮播✓ Marquee✓ InfiniteMovingCards
首屏聚光灯效果✗✓ Spotlight
设备样机✓ Safari/iPhone✗
3D卡片倾斜效果✗✓ 3D Card
规则： Magic UI = 专业打磨的SaaS页面组件，Aceternity = 炫酷视觉效果组件

Troubleshooting

问题排查

yaml
"Component not found":
  → npx magicui-cli@latest add [name]
  → Check components/magicui/[name].tsx

"Animation not playing":
  → Add 'use client'
  → Check framer-motion installed

"Hydration mismatch":
  → dynamic(() => ..., { ssr: false })

"Marquee stuttering":
  → Increase [--duration:Xs]
  → Use pauseOnHover
yaml
"Component not found":
  → npx magicui-cli@latest add [name]
  → Check components/magicui/[name].tsx

"Animation not playing":
  → Add 'use client'
  → Check framer-motion installed

"Hydration mismatch":
  → dynamic(() => ..., { ssr: false })

"Marquee stuttering":
  → Increase [--duration:Xs]
  → Use pauseOnHover

References

参考资料

  • components.md — Full component API with all props
  • components.md — 包含所有属性的完整组件API文档

External Resources

外部资源