Back to Details

frontend-aceternity

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Aceternity UI

Aceternity UI

Copy-paste animated effects for stunning landing pages. Built on Framer Motion + Tailwind.
可直接复制粘贴的动画效果，用于打造惊艳的着陆页。基于Framer Motion + Tailwind构建。

When to Use

适用场景

  • Hero sections with spotlight/aurora effects
  • 3D card hover effects
  • Text reveal animations
  • Animated backgrounds (beams, stars, meteors)
  • User asks for "cool effects", "wow factor"
  • 带聚光灯/极光效果的Hero区域
  • 3D卡片悬停效果
  • 文字揭示动画
  • 动画背景（光束、星星、流星）
  • 用户需要「炫酷效果」「惊艳感」时

When NOT to Use

不适用场景

  • Basic UI components → shadcn/ui
  • SaaS stats/marquees → Magic UI
  • State-driven animations → Rive
  • 基础UI组件 → shadcn/ui
  • SaaS数据滚动/跑马灯 → Magic UI
  • 状态驱动的动画 → Rive

Process

使用流程

IDENTIFY → INSTALL → CUSTOMIZE
  1. Identify effect type needed
  2. Install: 
    npx aceternity-ui@latest add [component]
  3. Customize colors/timing
识别需求 → 安装 → 自定义
  1. 确定所需的效果类型
  2. 安装：
    npx aceternity-ui@latest add [component]
  3. 自定义颜色/时长

Dependencies

依赖项

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

Component Categories

组件分类

yaml
Backgrounds:  spotlight, aurora-background, background-beams, wavy-background, meteors, sparkles
Cards:        3d-card, evervault-card, focus-cards, infinite-moving-cards, wobble-card
Text:         text-generate-effect, flip-words, typewriter-effect, hero-highlight
Navigation:   floating-navbar, floating-dock, navbar-menu
Special:      lamp, tracing-beam, parallax-scroll, globe, timeline
Buttons:      moving-border, hover-border-gradient
yaml
Backgrounds:  spotlight, aurora-background, background-beams, wavy-background, meteors, sparkles
Cards:        3d-card, evervault-card, focus-cards, infinite-moving-cards, wobble-card
Text:         text-generate-effect, flip-words, typewriter-effect, hero-highlight
Navigation:   floating-navbar, floating-dock, navbar-menu
Special:      lamp, tracing-beam, parallax-scroll, globe, timeline
Buttons:      moving-border, hover-border-gradient

Decision Tree

决策树

yaml
Need dramatic effect?
  ├─ Hero background → spotlight, aurora-background, background-beams
  ├─ Feature cards → 3d-card, focus-cards
  ├─ Testimonials → infinite-moving-cards
  ├─ Headlines → text-generate-effect, flip-words
  └─ Section divider → lamp, tracing-beam
yaml
Need dramatic effect?
  ├─ Hero background → spotlight, aurora-background, background-beams
  ├─ Feature cards → 3d-card, focus-cards
  ├─ Testimonials → infinite-moving-cards
  ├─ Headlines → text-generate-effect, flip-words
  └─ Section divider → lamp, tracing-beam

Quick Patterns

快速示例

tsx
// Spotlight Hero
<div className="relative h-screen bg-black">
  <Spotlight className="absolute top-0 left-0" fill="white" />
  <div className="relative z-10">
    <h1>Content</h1>
  </div>
</div>

// 3D Card
<CardContainer>
  <CardBody className="bg-gray-50 rounded-xl p-6">
    <CardItem translateZ="50">Title</CardItem>
    <CardItem translateZ="100"><img src="..." /></CardItem>
  </CardBody>
</CardContainer>

// Flip Words
<h1>Build <FlipWords words={["faster", "better", "smarter"]} /> apps</h1>
tsx
// Spotlight Hero
<div className="relative h-screen bg-black">
  <Spotlight className="absolute top-0 left-0" fill="white" />
  <div className="relative z-10">
    <h1>Content</h1>
  </div>
</div>

// 3D Card
<CardContainer>
  <CardBody className="bg-gray-50 rounded-xl p-6">
    <CardItem translateZ="50">Title</CardItem>
    <CardItem translateZ="100"><img src="..." /></CardItem>
  </CardBody>
</CardContainer>

// Flip Words
<h1>Build <FlipWords words={["faster", "better", "smarter"]} /> apps</h1>

SSR & Hydration

SSR 与水合

tsx
// ALL components require 'use client'
'use client'

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

// Hydration fix pattern
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null
tsx
// ALL components require 'use client'
'use client'

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

// Hydration fix pattern
const [mounted, setMounted] = useState(false)
useEffect(() => setMounted(true), [])
if (!mounted) return null

Performance Tips

性能优化建议

tsx
// Reduce particles on mobile
const count = isMobile ? 20 : 100

// Respect reduced motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
tsx
// Reduce particles on mobile
const count = isMobile ? 20 : 100

// Respect reduced motion
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches

References

参考资料

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

External Resources

外部资源