# Aceternity UI 技能 ## 概述 Aceternity UI 是一个高级、可立即投入生产的 React 组件库，专为 Next.js 应用程序设计。它提供了 100 多个使用 Tailwind CSS 和 Framer Motion 构建的精美动画和交互式组件。组件通过 shadcn CLI 安装，并且可以直接在代码库中进行自定义。 **主要特点：** * 100 多个动画、可立即投入生产的组件 * 专为 Next.js 13+ 构建，支持 App Router * 完整的 TypeScript 支持 * Tailwind CSS v3+ 样式 * Framer运动动画 * 深色模式支持 * 复制粘贴友好（不是 npm 包） * 完整的源代码访问以进行定制 **先决条件：** * Next.js 13+（推荐应用路由器） *反应16.8+ *顺风CSS v3+ * TypeScript（推荐） * Node.js 18+ 与 Bun、npm 或 pnpm ## 安装 ### 初始设置 **对于新项目：** # 创建 Next.js 项目（最好是bun） Bunx 创建下一个应用程序@最新的我的应用程序 # 或：npx create-next-app@latest my-app # 或：pnpm create next-app@latest my-app cd 我的应用程序 # 选择这些选项： # - TypeScript：是 # - ESLint：是的 # - Tailwind CSS：是 # - src/目录：可选 # - 应用程序路由器：是（推荐） # - 导入别名：@/*（默认） **通过 shadcn CLI 初始化 Aceternity UI：** # 使用发髻（首选） Bunx --bun shadcn@最新初始化 # 使用 npm npx shadcn@最新 init # 使用 pnpm pnpm dlx shadcn@最新 init # 设置期间： #-风格：纽约（推荐） # - 颜色：锌色（或您的喜好） # - CSS 变量：是（推荐） **配置注册表：** 初始化后，更新“components.json”以添加 Aceternity 注册表： { "$schema": "https://ui.shadcn.com/schema.json", “风格”：“纽约”， “rsc”：正确， “tsx”：正确， “顺风”：{ "config": "tailwind.config.ts", "css": "app/globals.css", “baseColor”：“锌”， “cssVariables”：true }, “别名”：{ “组件”：“@/组件”， “utils”：“@/lib/utils” }, “注册表”：{ “@aceternity”：“https://ui.aceternity.com/registry/{name}.json” } } ### 安装组件 **使用 shadcn CLI 3.0+（命名空间注册表）：** # 安装特定组件 Bunx shadcn@latest 添加@aceternity/background-beams # 或：npx shadcn@latest 添加@aceternity/background-beams # 或：pnpm dlx shadcn@latest 添加@aceternity/background-beams # 组件将添加到：components/ui/background-beams.tsx **手动安装：** 如果注册表方法不起作用，请手动安装： 1.安装所需的依赖项：包子添加运动 clsx tailwind-merge # 或：npm install Motion clsx tailwind-merge 2. 将实用函数添加到 `lib/utils.ts` 中：从“clsx”导入 { clsx，类型 ClassValue } 从“tailwind-merge”导入 { twMerge } 导出函数 cn(...输入: ClassValue[]) { 返回 twMerge(clsx(输入)) } 3. 将组件代码从 [ui.aceternity.com]() 复制到您的项目 ## 组件类别 ### 1\.背景和效果（28 个组件）为英雄部分和整页布局创建令人惊叹的动画背景和视觉效果。 **关键组件：** * **背景光束** \- 遵循 SVG 路径的动画发光光束 * **背景渐变** \- 带过渡的平滑渐变背景 * **波浪背景** \- 动画波浪图案 * **极光背景** \ - 北极光启发动画渐变 * **闪光** \- 粒子闪光效果 * **流星** \- 流星坠落动画 * **聚光灯** \- 动态聚光灯效果 * **网格和点背景** \- 微妙的网格/点图案 * **涡流** \- 旋转涡流动画 * **画布显示效果** \- 使用画布动画显示内容 **使用示例：** “使用客户端”；从“@/components/ui/background-beams”导入{BackgroundBeams}；导出默认函数 HeroSection() { 返回（

欢迎

美丽的动画背景

<背景光束/>

）； } **何时使用：** * 需要视觉冲击力的英雄部分 * 带有动画背景的登陆页面 * 全屏部分需要深度 * 作品集或代理网站 * 带有号召性用语的营销页面 ### 2\.卡组件（15 个组件）具有悬停效果、动画和 3D 转换的交互式卡片。 **关键组件：** * **3D 卡片效果** \- 具有 CSS 透视和 3D 变换的卡片 * **卡片悬停效果** \- 平滑的悬停动画和过渡 * **可扩展卡片** \- 扩展以显示更多内容的卡片 * **焦点卡** \- 悬停时聚焦/突出显示的卡 * **卡片聚光灯** \- 鼠标跟随聚光灯效果 * **眩光卡** \-全息眩光效果 * **摆动卡** \- 有趣的摆动动画 * **无限移动卡片** \- 自动滚动卡片轮播 * **方向感知悬停** \- 基于光标方向的悬停效果 **使用示例：** “使用客户端”；从“@/components/ui/3d-card”导入{ CardBody、CardContainer、CardItem }；导出函数 ProductCard() { 返回（ <卡片容器> 产品名称产品描述在这里

）； } **何时使用：** * 产品展示 * 功能亮点 * 投资组合项目 * 团队成员简介 * 定价等级 * 博客文章预览 ### 3\.滚动和视差（5 个组件）创建引人入胜的基于滚动的动画和视差效果。 **关键组件：** * **视差滚动** \- 具有视差滚动的图像 * **粘性滚动显示** \- 滚动时显示内容 * **容器滚动动画** \- 动画滚动容器 * **英雄视差** \- 视差英雄部分 * **MacBook Scroll** \- MacBook 风格的滚动交互 **使用示例：** 从“@/components/ui/sticky-scroll-reveal”导入{StickyScroll}；常量内容 = [ { 标题：“功能一”，描述：“功能一的描述......”，内容：

此处的视觉内容

}, // 更多项目... ]; 导出函数功能（）{ 返回 ; } **何时使用：** * 带有滚动交互的功能展示 *讲故事的布局 * 产品参观 * 带有视觉中断的长篇内容 * 互动时间线 ### 4\.文本组件（10 个组件）标题、标题和交互式排版的动画文本效果。 **关键组件：** * **文本生成效果** \- 文本逐字符出现 * **打字机效果** \- 打字动画 * **翻转单词** \- 单词旋转动画 * **文本悬停效果** \- 悬停时的交互式文本 * **英雄突出显示** \- 渐变文本突出显示 * **加密文本** \- 矩阵式加密文本效果 * **彩色文本** \- 渐变动画文本 **使用示例：** 从“@/components/ui/typewriter-effect”导入{ TypewriterEffect }；常量词 = [ { 文本：“构建”}， { 文字：“太棒了” }， { text: "网站", className: "text-blue-500" } ]; 导出函数 Hero() { 返回; } **何时使用：** * 英雄标题 * 引人注目的标题 * 动态内容显示 * 交互式登陆页面 * 动画号召性用语 ### 5\.按钮（4 个组件）带有动画和效果的增强按钮组件。 **关键组件：** * **Tailwind CSS 按钮** \- 样式按钮的集合 * **悬停边框渐变** \- 动画渐变边框 * **移动边框** \- 动画边框移动 * **有状态按钮** \- 带转换的多状态按钮 **使用示例：** 从“@/components/ui/moving-border”导入{MovingBorder}；导出函数 CTAButton() { 返回（开始使用）； } ### 6\.导航（5 个组件）现代导航菜单和选项卡系统。 **关键组件：** * **浮动导航栏** \- 浮动导航栏 * **导航栏菜单** \- 全功能导航菜单 * **选项卡** \- 动画选项卡组件 * **可调整大小的导航栏** \- 响应式导航 * **粘性横幅** \- 粘性公告横幅 ### 7\.输入和表格（3 个组成部分）增强的表单输入和文件上传组件。 **关键组件：** * **注册表单** \- 动画注册表单 * **占位符和消失输入** \- 带有动画占位符的输入 * **文件上传** \- 拖放文件上传 **使用示例：** 从“@/components/ui/placeholders-and-vanish-input”导入 { PlaceholdersAndVanishInput }；导出函数SearchBar() { 常量占位符 = [ “搜索任何东西...”, “你在找什么？”, “输入搜索内容...” ]; 返回（ <占位符和消失输入占位符={占位符} onChange={(e) => console.log(e.target.value)} onSubmit={(e) => { e.preventDefault(); console.log("已提交"); }} /> ）； } ### 8\.覆盖层和弹出框（3 个组件）带动画的模态对话框和工具提示。 **关键组件：** * **动画模态** \- 具有平滑动画的模态 * **动画工具提示** \- 带有进入/退出动画的工具提示 * **链接预览** \- 悬停时链接预览弹出窗口 **使用示例：** 从“@/components/ui/animated-modal”导入{ Modal、ModalBody、ModalContent、ModalTrigger }；导出函数 BookingModal() { 返回（ <模态> 立即预订 <模态体> <模态内容>

预订详情

{/* 模态内容 */} ）； } ### 9\.转盘和滑块（4 个组件）图像滑块和轮播组件。 **关键组件：** * **图像滑块** \- 全屏图像滑块 * **轮播** \- 标准轮播组件 * **Apple Cards Carousel** \- Apple 风格的卡片轮播 * **动画推荐** \- 推荐滑块 ### 10\.布局和网格（3 个组件）网格布局和容器组件。 **关键组件：** * **布局网格** \- 动画网格布局 * **便当网格** \- 便当盒样式网格 * **容器盖** \- 全屏容器 ### 11\.数据与可视化（2 个组成部分）用于显示数据和比较的组件。 **关键组件：** * **时间轴** \- 动画时间轴组件 * **比较** \- 比较之前/之后滑块 ### 12\.光标和指针（3 个组件）光标跟随效果和交互。 **关键组件：** * **跟随指针** \- 光标跟随的元素 * **指针突出显示** \- 光标上的突出显示效果 * **镜头** \- 放大镜效果 ### 13\. 3D 组件（2 个组件）使用 CSS 变换的 3D 视觉效果。 **关键组件：** * **3D Pin** \- Pinterest 风格的 3D 卡 * **3D 选取框** \- 3D 旋转选取框 ### 14\.装载机（2 个组件）加载动画和进度指示器。 **关键组件：** * **多步加载器** \- 多步加载动画 * **装载机** \- 各种装载旋转器 ### 15\.型材和块（3 个组件）预构建的部分模板。 **关键组件：** * **功能部分** \- 功能展示模板 * **卡片** \- 预先设计的卡片布局 * **英雄部分** \- 英雄部分模板 ## 常见模式 ### 深色模式支持所有 Aceternity 组件都通过 Tailwind 的深色模式类支持深色模式：

{/* 内容 */}

### 响应式设计组件默认是响应式的。使用 Tailwind 的响应式前缀：

响应式标题

### 组合组件可以组合组件以实现复杂的布局：从“@/components/ui/background-beams”导入{BackgroundBeams}；从“@/components/ui/typewriter-effect”导入{ TypewriterEffect }；从“@/components/ui/moving-border”导入{MovingBorder}；导出默认函数 Hero() { 返回（

<移动边界> <按钮>开始

<背景光束/>

）； } ## 最佳实践 ### 1\.性能优化 **使用“use client”指令** \- Aceternity 组件使用 Framer Motion，需要客户端渲染： “使用客户端”；从“@/components/ui/component”导入 { Component } ； **延迟加载重型组件：** 从“下一个/动态”导入动态； const HeavyBackground = 动态( () => import('@/components/ui/background-beams'), { ssr: 假 } ）； ### 2\.无障碍 **添加 ARIA 标签：**

Aceternity用户界面

包含技能