Aceternity UI：200+ 组件，1小时做完落地页

结论：Aceternity UI 是一个 React 组件库，基于 Tailwind CSS 和 Motion，提供超过 200 个免费组件。它不通过 npm 安装包分发，而是让开发者直接复制源码到项目里，因此可以随意修改。作者实际体验后，用 1 小时完成了搁置两周的落地页，认为它把“做好看”从设计问题变成了复制粘贴问题。

它是什么

Aceternity UI 由 Manu Arora 创建，底座是 Tailwind CSS 和 Motion（原 Framer Motion）。官网宣称有 200+ 生产就绪的组件、区块和模板，累计用户超过 12 万，Google、Microsoft、Cisco、Harvard、NYU 等团队都在使用。

它的设计哲学与 shadcn/ui 一致：不通过包管理器安装，直接把源码复制进项目。这样代码归你，想改哪行改哪行，也不需要和别人的 API 设计争执。有开发者用一句话总结：它就是 shadcn/ui 的视觉效果增强版。

免费组件到底有多少

免费组件按类别大致包括：

• 背景效果：Aurora Background、Wavy Background、Beams With Collision、Meteors、Vortex、Spotlight、Grid Background 等
• 卡片交互：3D Card、Glare Card、Wobble Card、Focus Cards、Card Stack、Draggable Card、Infinite Moving Cards 等
• 滚动动效：Macbook Scroll、Hero Parallax、Sticky Scroll Reveal、Tracing Beam 等
• 文字动效：Typewriter、Flip Words、Encrypted Text、Text Hover Effect、Colourful Text 等
• 导航表单：Floating Navbar、Floating Dock、Tabs、Sticky Banner、Signup Form、File Upload、Gooey Input 等
• 数据展示：GitHub Globe、World Map、Timeline、Compare、Bento Grid、Apple Cards Carousel、Animated Testimonials 等

此外还有带机械键盘音效的 Keyboard、带打字机效果的 Terminal、能把图片转成 ASCII 动画的 ASCII Art、调用摄像头的 Webcam Pixel Grid。这些全部免费，复制就能用。

实际落地页组装流程

作者的组装顺序是：首屏用 Aurora Background 打底，标题套 Text Hover Effect，副标题用 Flip Words 轮播卖点词。第二屏用 Bento Grid 摆四个功能卡，其中一个卡片嵌入 Terminal 组件，播放安装命令的打字机动画。第三屏用 Animated Testimonials 放用户评价。导航条用 Resizable Navbar，滚动时自动收窄。整个过程约 1 小时，零成本。

代码风格也值得注意：所有组件都使用统一的 cn 工具函数合并 className，Motion 写法一致，TypeScript 类型完整。复制多个组件进项目不会互相冲突，这对拼装式组件库来说并不理所当然。

不适用场景与性能问题

它并不适合所有项目。审美倾向非常明确：深色、发光、玻璃拟态、大量微动效，非常契合 AI 产品、开发者工具、Web3 的落地页。但政务系统、医院管理后台、企业内部 CRM 如果硬套这套视觉，会显得不严肃。

动效成本是真实存在的。Motion 本身不轻，几个背景组件同时渲染 canvas 时，低端安卓机容易掉帧。作者建议首屏最多保留一个重动效，其余用滚动懒加载缓解。另外注意 Motion 改名后的 API 变化，网上很多旧教程还在用 framer-motion 的 import 路径，复制组件时要确认依赖版本。

付费方案与建议

免费档为 $0，所有 free components 全部开放。年费档 $169（原价 $249），终身档 $199（原价 $299）一次买断永久更新，团队档 $1590 含 10 个席位。

付费内容不是单个组件，而是成套的页面区块，例如 Hero Sections 23+、Feature Sections 22+、Backgrounds 11+、Bento Grids 6+ 等。简单说，免费给零件，付费卖整车。如果你一年做十几个项目，$199 买断很划算；如果一年只做两个页面，可以先不买。

还有一个实践技巧：付费区块的预览图是公开的，虽然拿不到源码，但可以用截图交给 coding Agent 生成。作者的做法是：截图、指定 React + Tailwind + Motion 技术栈、描述动效细节，同时把免费组件源码作为上下文提供给 Agent，这样生成的代码风格能与库对齐。对于静态布局类（Bento Grid、Pricing、Logo Cloud、Footer）复刻效果接近满分，但涉及 WebGL 和 Shader 的区块不要指望截图还原。

组件库地址：ui.aceternity.com