Aceternity UI

Aceternity UI 是面向 React 与 Tailwind CSS 项目的动效组件资源库，提供可复制的组件源码、页面区块和付费模板。它适合营销页、作品集和视觉展示界面；使用者需要自己接管代码、依赖、性能与无障碍质量，并非安装后自动获得完整设计系统。

免费组件怎样安装

项目可通过 shadcn CLI 拉取注册表组件。已有 shadcn 项目可以直接添加单个组件；新项目先完成初始化：

npx shadcn@latest init
npx shadcn@latest add https://ui.aceternity.com/registry/[component].json

CLI 3 还支持在 components.json 中配置命名空间：

{
  "registries": {
    "@aceternity": "https://ui.aceternity.com/registry/{name}.json"
  }
}

npx shadcn@latest add @aceternity/[component]

把 [component] 换成组件页面给出的名称。若项目不是 shadcn 结构，也可以按文档复制源码，但要同步安装依赖、确认导入别名，并适配自己的 Tailwind 配置。

组件代码会进入你的项目

Aceternity UI 采用“复制源码到项目”的方式，安装后组件不再是一个完全封装的远程黑盒。优点是可以改样式、逻辑和动画；代价是上游修复不会自动合并，你要负责代码审查、升级与测试。常见工具依赖包括 motion、clsx 与 tailwind-merge，具体仍以每个组件的安装说明为准。

团队使用时建议把引入日期、来源链接和本地修改写进组件文档，并用 Storybook 或独立路由保留视觉回归样例。

动效、3D 与素材依赖要逐项检查

组件库包含背景、卡片、文字、导航、视差和 3D 类效果。不同组件可能依赖 Motion、Canvas、WebGL、图片或额外字体，不能只复制 JSX 就假定可运行。安装前先阅读组件页的代码与依赖，检查是否使用客户端组件、浏览器 API，以及在 Next.js 服务端渲染环境中的边界。

第三方图片、图标和字体不一定自动继承组件的许可；模板中的演示素材也可能有独立条款。商用前应分别确认组件、付费资源和素材来源。

免费组件、Pro 模板与授权分开看

官方 Pro 许可允许为自己或客户制作不限数量的终端产品并修改代码，但禁止把源码重新分发、上架到组件市场，或把模板及其衍生版本作为模板商品出售。具体方案名称、价格和权益会变化，购买前应以实时价格页与 Licence 页面为准。

上线前做性能与无障碍回退

• 遵守 prefers-reduced-motion，为不适合动画的用户减少或关闭运动。
• 确认键盘焦点、表单标签、颜色对比度和屏幕阅读器名称没有被视觉效果遮蔽。
• 在中低端手机测试滚动、首屏加载和电量消耗，限制粒子、模糊和 WebGL 的数量。
• 延迟加载非首屏动画，并为 Canvas、视频或 3D 内容准备静态回退。
• 用真实文案和真实图片测试布局，避免演示短文本掩盖溢出问题。

什么情况下不该直接使用

对后台管理、长表单、数据密集页面和强调快速完成任务的产品，强动效可能增加干扰与维护成本。此时更适合使用稳定的基础组件，把 Aceternity UI 限定在首屏展示、案例区或少量关键交互。选择组件的依据应是信息层级和用户任务，而不是“页面看起来还不够炫”。