Aceternity UI

面向营销页面和创意网站的动画组件集合，基于 Framer Motion 和 Tailwind CSS，采用 copy-paste 模式分发。

技术简介说明

Aceternity UI 是由 Manu Arora 创建的动画 UI 组件集合，专注于为营销页面、Landing Page 和产品首页提供视觉冲击力极强的动画效果。它不是传统的 UI 组件库，而是一个"动画特效库"——提供 3D 翻转卡片、光束碰撞、粒子背景、滚动驱动动画等电影级视觉效果。

Aceternity UI 采用与 shadcn/ui 相同的 copy-paste 模式，组件源码直接复制到项目中，完全可定制。所有动画基于 Framer Motion 实现，支持弹簧物理、布局动画、滚动动画、手势交互等高级特性。

截至 2026 年初，Aceternity UI 拥有 15K-28K GitHub Stars（不同来源统计口径不同），是 Tailwind 生态中最受欢迎的动画组件库之一。2025 年 12 月入选 shadcn/ui Awesome 组件注册表。

基本信息

• 官网：https://ui.aceternity.com
• GitHub：https://github.com/aceternity
• License：免费组件开源可用；Pro 部分商业授权
• 最新版本：持续更新（非 npm 包，无传统版本号）
• 主要维护者：Manu Arora（@manuarora700 / @mannupaaji）

快速上手

安装

# 前置要求：Next.js 或 React 项目 + Tailwind CSS
# 安装 Framer Motion（核心依赖）
npm install framer-motion
 
# 可选：常用工具依赖
npm install clsx tailwind-merge

基础配置

# 1. 浏览 https://ui.aceternity.com/components
# 2. 选择组件，复制源码
# 3. 粘贴到项目 components/ 目录
# 4. 确保 Tailwind CSS 配置包含所需工具类

最小示例

// components/ui/background-beams.tsx（从官网复制）
import { BackgroundBeams } from '@/components/ui/background-beams'
 
export default function HeroSection() {
  return (
    <div className="h-[40rem] w-full rounded-md bg-neutral-950 relative flex flex-col items-center justify-center antialiased">
      <div className="max-w-2xl p-4">
        <h1 className="relative z-10 text-lg md:text-7xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600 text-center font-sans font-bold">
          加入等待列表
        </h1>
        <p className="text-neutral-500 max-w-lg mx-auto my-2 text-sm text-center relative z-10">
          欢迎加入我们的产品等待列表
        </p>
      </div>
      <BackgroundBeams />
    </div>
  )
}

核心概念与架构

动画引擎：Framer Motion

Aceternity UI 的所有动画完全基于 Framer Motion：

架构模式：Copy-Paste

浏览网站 → 选择组件 → 复制源码 → 粘贴到项目

• 组件直接成为你代码库的一部分
• 完全可定制，无版本锁定
• 无 npm 包依赖

组件解剖（以 Spotlight 为例）

// components/ui/spotlight.tsx
import { motion } from 'framer-motion'
 
export const Spotlight = ({ gradientFirst, ...props }) => {
  return (
    <motion.div
      className="pointer-events-none fixed z-[100] h-screen w-screen opacity-0"
      animate={{ opacity: 1 }}
      transition={{ duration: 0.5 }}
    >
      {/* SVG 渐变和滤镜实现聚光灯效果 */}
    </motion.div>
  )
}

核心特性

• 200+ 组件：覆盖卡片、背景、文字动画、导航、滚动效果等
• Framer Motion 驱动：弹簧物理、布局动画、滚动动画、手势交互
• 暗色优先设计：默认暗色主题，科技感强
• Copy-Paste 模式：完全源码控制，无版本锁定
• 3D 效果：3D 卡片翻转、GitHub Globe 等
• 滚动驱动：视差滚动、3D 旋转、容器滚动动画
• SVG 特效：变位滤镜、光束碰撞、粒子效果
• Pro 模板：SaaS、营销页等完整模板（付费）

生态图

核心组件

组件分类

相关工具

适用场景

• 营销页面 / Landing Page：核心定位，视觉冲击力强
• 作品集 / Portfolio：动画展示个人作品
• SaaS 产品首页：Pro 提供 SaaS 模板
• 产品发布页：动画叙事、滚动驱动
• 创意机构网站："电影级"视觉体验
• 技术产品首页：暗色科技感风格
• 活动页面：动态视觉吸引注意力

开发与工程化

开发流程

1. 浏览官网选择所需动画组件
2. 复制组件源码到项目
3. 确保 Framer Motion 已安装
4. 按需调整动画参数（颜色、速度、触发条件）
5. 搭配 shadcn/ui 构建完整页面

构建部署

Aceternity UI 组件是普通 React 代码，构建流程与标准 Next.js/React 项目一致：

npm run build  # Next.js 或 React 构建

性能优化注意事项

• 复杂动画使用 will-change 优化
• 避免在主线程触发大量 layout 动画
• 移动端适当简化或关闭复杂动画
• 注意 prefers-reduced-motion 媒体查询

性能与安全

性能特点

优化建议

// ✅ 推荐：减少动画复杂度
<motion.div
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
/>
 
// ✅ 推荐：响应 prefers-reduced-motion
const prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)')
 
// ✅ 推荐：移动端降级
const isMobile = useIsMobile()
{!isMobile && <ComplexAnimation />}

可访问性注意事项

• 所有动画组件应尊重 prefers-reduced-motion
• 避免自动播放的动画干扰用户
• 注意动画不应阻塞主要内容渲染

技术对比

关键差异

• vs Magic UI：Aceternity 更"炫酷"适合创意网站；Magic UI 更"专业"适合客户提案
• vs react-bits：Aceternity 组件更完整；react-bits 更轻量灵活
• vs shadcn/ui：Aceternity 专注动画视觉；shadcn/ui 提供基础功能组件

最佳实践

使用原则

1. 按需使用，不要贪多：一个页面 2-3 个动画焦点即可
2. 性能优先：复杂动画使用 will-change
3. 移动端降级：部分复杂动画在移动端应简化或关闭
4. 可访问性：注意 prefers-reduced-motion 媒体查询
5. 暗色模式优先：Aceternity 组件默认暗色设计
6. 搭配 shadcn/ui：Aceternity 负责视觉，shadcn/ui 负责功能

代码组织

components/
├── ui/           # shadcn/ui 基础组件
├── effects/      # Aceternity 动画组件
├── sections/     # 页面区块组合
└── features/     # 业务功能组件

常见陷阱

• 一个页面使用过多动画导致视觉疲劳
• 忽略移动端性能问题
• 忘记处理 prefers-reduced-motion
• 硬编码动画参数不便后续调整

技术局限与边界

不太适合的场景

• 后台管理系统（过于花哨）
• 表单密集型应用（动画价值有限）
• 企业级数据展示（缺少实用组件）
• 亮色主题为主的项目（需要大量调整）
• 非 React 项目（主要面向 React 生态）

学习资源

官方资源

• 官方网站
• 组件库
• 安装指南
• Next.js 指南
• 许可证

社区资源

• GitHub
• Twitter/X - @mannupaaji
• YouTube 教程（Manu Arora 频道）
• Reddit r/reactjs
• 21st.dev

配套项目

• saasternity — 开源 SaaS 模板
• AceStitch — 配套工具

2026 年现状

最新版本

发展趋势

• 持续新增组件：每月新增动画组件和 Blocks
• Pro 版本扩展：更多商业模板和 Blocks
• AI 工具集成：Claude Code Skill、MCP Server
• saasternity 模板：开源 SaaS 模板持续更新

社区活跃度

• 15K-28K GitHub Stars
• 入选 shadcn/ui Awesome 注册表
• YouTube 教程持续产出
• Reddit 活跃讨论

未来路线图

• 更多动画组件和效果
• 扩展 Pro 模板库
• 改进可访问性支持
• 优化移动端性能