Aceternity UI 特效组件库
Aceternity UI
主打视觉特效+微交互的组件库，200+ 发光卡片、视差滚动、文字渐显、3D 悬浮、Bento 网格，基于 Framer Motion。
功能概览
主打视觉特效+微交互的组件库，200+ 发光卡片、视差滚动、文字渐显、3D 悬浮、Bento 网格，基于 Framer Motion。
- 网站视觉太普通、没记忆点
- 不会做高级动效
- Bento 网格等流行布局难写
- 品牌站缺设计质感
使用场景
- 做有视觉冲击力的品牌落地页
- 做 Bento 网格布局
- 做发光卡片和 3D 悬浮效果
- 做视差滚动和文字渐显
适合谁用
- 做品牌官网的前端
- 做科技产品落地页的人
- 需要视觉差异化的人
不适合谁
- 做后台管理系统的人
- 不需要动效的人
普通人版解释
用大白话说这个库给你 200 多个带炫酷动效的现成组件，比如鼠标跟随的发光效果、3D 悬浮卡片、文字渐显动画。复制粘贴到项目就能用，让网站看起来像设计工作室做的。
专业版解释
给 Claude Code / Codex 用户Aceternity UI 主打「视觉特效 + 微交互」的组件库，内置 200+ 现成区块：发光卡片、视差滚动、文字渐显、3D 悬浮、Bento 网格布局等，全部基于 Framer Motion 实现，复制即可用。能让你的品牌站瞬间有「设计工作室出品」的质感。适合创意品牌、科技产品、高端服务类官网。
安装方式
复制对应平台的命令到终端执行。安装前建议先确认来源和安全等级。
npx shadcn@latest add @aceternity/background-beams
SKILL.md 预览
这是这个技能包的核心内容。默认折叠预览，确认后再复制或展开。
如何使用
安装后，把下面的提示词直接发给 AI 即可触发这个技能包。
- 1.请用 Aceternity UI 做一个带发光背景的品牌落地页
- 2.请用 Aceternity UI 做 Bento 网格展示产品功能
- 3.请用 Aceternity UI 做 3D 悬浮卡片效果
安全说明
技能包可能不只是提示词。请先查看下面的权限表，了解这个技能包会做什么。
| 权限项 | 状态 | 风险 |
|---|---|---|
| 是否包含脚本 | 否 | 无风险 |
| 是否会执行系统命令 | 否 | 无风险 |
| 是否会读取本地文件 | 否 | 无风险 |
| 是否会联网请求 | 否 | 无风险 |
| 是否适合新手安装 | 否 | 不建议新手 |
相关技能包
前端设计技能包
让 AI 做有辨识度的前端视觉设计：美学方向、字体、避免模板化的廉价感。
Magic UI 动效组件库
在 shadcn/ui 基础上扩展的动效组件库，50+ 动画展示组件：数字滚动、3D 进度条、光斑背景、刮刮卡交互，现代灵动。
网页动画核心技能包
让 AI 正确使用 GSAP 核心 API：做网页动画、SVG 动画、React/Vue 动画时不再写错代码。
动画序列编排技能包
让 AI 正确编排多个动画的先后顺序：标题先入、副标题跟入、按钮最后入。
滚动动画技能包
让 AI 做对滚动联动的网页动画：视差、滚动进度、钉住章节、滚动触发入场。
React 动画技能包
让 AI 在 React / Next.js 里正确使用 GSAP：useGSAP hook、清理、SSR 不报错。