Aceternity UI

Overview

Aceternity UI is a sensational library of trendy, visually breathtaking UI components crafted by Manu Arora. It delivers complex 3D card perspectives, dynamic spotlights, aurora gradients, moving borders, and glowing lamp headers that make websites instantly stand out.

Built with Tailwind CSS, Framer Motion, and Three.js, it bridges the gap between award-winning creative design and rapid frontend implementation.

Key Features

• 🌟 3D Perspectives & Lighting: Card hover 3D tilt effects, mouse-tracking spotlights, and dynamic canvas backgrounds.
• 🎨 Modern Trendy Visuals: Aurora gradients, glowing text reveals, macbook scroll showcases, and infinite moving cards.
• 📋 Copy-Paste Philosophy: Direct component integration without vendor lock-in, fully customizable via Tailwind utilities.
• ⚡️ Next.js & React Ready: Built with TypeScript, Server Components compatibility, and full responsiveness.

Installation & Quick Start

Install standard peer dependencies:

npm install framer-motion clsx tailwind-merge

3D Card Hover Example

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">
          Make things float
        </CardItem>
        <CardItem as="p" translateZ="60" className="text-muted-foreground text-sm max-w-sm mt-2">
          Hover over this card to unleash the fascinating 3D perspective effect.
        </CardItem>
      </CardBody>
    </CardContainer>
  );
}

When to Choose

• Ideal For: Modern SaaS landing pages, agency portfolios, Web3 showcases, and tech startups seeking memorable visual impact.
• Alternatives: For standard enterprise admin panels, use basic shadcn/ui or Ant Design.