项目概述

Aceternity UI 是由海外知名设计师兼开发者 Manu Arora 打造的现象级现代动效组件库。它专注于将令人惊艳的 3D 空间透视、鼠标跟踪聚光灯（Spotlight）、极光渐变背景及流光文字特效转化为易于集成的 React 组件。

结合 Tailwind CSS、Framer Motion 与 Three.js，让前端开发者无需深厚的设计背景也能轻松搭建媲美 Awwwards 获奖级别的酷炫界面。

核心特性

🌟 3D 空间透视与光影交互：鼠标悬停 3D 倾斜卡片、跟随光标移动的聚光灯、MacBook 滚动展开特效。
🎨 潮流前沿设计元素：极光背景流动、流光边框、无限平滑滚动卡片与发光灯罩标题（Lamp Section）。
📋 免安装即拷即用：无需安装庞大的黑盒 npm 包，直接复制代码并由 Tailwind CSS 完全控制外观。
⚡️ Next.js 深度适配：支持 TypeScript、服务端组件（RSC）与深色模式自适应。

快速上手与示例代码

npm install framer-motion clsx tailwind-merge

3D 悬浮卡片示例

import React from "react";
import { CardContainer, CardBody, CardItem } from "@/components/ui/3d-card";

export default function ThreeDCardDemo() {
  return (
    <CardContainer className="inter-var">
      <CardBody className="bg-card border-border rounded-xl p-6 border w-auto sm:w-[22rem]">
        <CardItem translateZ="50" className="text-xl font-bold">
          3D 空间交互卡片
        </CardItem>
        <CardItem as="p" translateZ="60" className="text-muted-foreground text-sm max-w-sm mt-2">
          鼠标悬停时即可体验多层级景深漂浮与立体空间感。
        </CardItem>
      </CardBody>
    </CardContainer>
  );
}

技术选型建议与适用场景

非常适合：现代 SaaS 产品落地页、前沿 AI 工具官网、设计创意工作室作品集及需要强烈第一印象的展示型网站。
不适用场景：强调极高数据密度与标准化 CRUD 表单录入的传统企业中后台系统。

Aceternity UI

项目概述

核心特性

快速上手与示例代码

3D 悬浮卡片示例

技术选型建议与适用场景

讨论与评价

相关组件推荐

23rd

Great UI

Rewamp UI