aceternity-ui

name	aceternity-ui
description	Add premium animated UI components built with Framer Motion and Tailwind CSS using Aceternity UI. Use when: adding animated effects (3D cards, glowing backgrounds, spotlight effects, moving borders), building visually stunning UIs, creating impressive hero sections and feature showcases in React/Next.js.
license	Apache-2.0
compatibility	Requires React 18+, Tailwind CSS 3+, Framer Motion 10+
metadata	{"author":"terminal-skills","version":"1.0.0","category":"design","tags":["aceternity-ui","react","framer-motion","animations","tailwind"],"use-cases":["Create a 3D tilt card effect for a product or pricing showcase","Add a spotlight effect that follows the cursor on a hero section","Build an animated background with moving beams or grid patterns","Add a glowing moving border to highlight key elements","Create a wavy animated background for section dividers"],"agents":["claude-code","openai-codex","gemini-cli","cursor"]}

Aceternity UI

Overview

Aceternity UI is a copy-paste component library — not an npm package. You copy the component code directly into your project, giving you full ownership and customization power. Components are built with Framer Motion and Tailwind CSS.

Key traits:

• Copy-paste approach (no runtime dependency)
• Framer Motion for physics-based animations
• Tailwind CSS for styling
• Next.js / React compatible
• TypeScript source included

Setup

Install dependencies

npm install framer-motion clsx tailwind-merge

Add the cn utility

// lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Configure Tailwind

// tailwind.config.ts — add animations
module.exports = {
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      animation: {
        spotlight: "spotlight 2s ease .75s 1 forwards",
        shimmer: "shimmer 2s linear infinite",
        "move-to-right": "move-to-right 2s linear infinite",
      },
      keyframes: {
        spotlight: {
          "0%": { opacity: "0", transform: "translate(-72%, -62%) scale(0.5)" },
          "100%": { opacity: "1", transform: "translate(-50%, -40%) scale(1)" },
        },
        shimmer: {
          from: { backgroundPosition: "0 0" },
          to: { backgroundPosition: "-200% 0" },
        },
      },
    },
  },
};

Top 5 Components with Code

1. 3D Card Effect — tilt on hover

// components/ui/3d-card.tsx
"use client";
import { useRef, useState } from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export const CardContainer = ({ children, className }: { children: React.ReactNode; className?: string }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [rotateX, setRotateX] = useState(0);
  const [rotateY, setRotateY] = useState(0);

  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
    if (!containerRef.current) return;
    const { left, top, width, height } = containerRef.current.getBoundingClientRect();
    const x = (e.clientX - left - width / 2) / 25;
    const y = (e.clientY - top - height / 2) / 25;
    setRotateX(-y);
    setRotateY(x);
  };

  return (
    
  );
};

   = () => (
  
);


  () {
   (
    
  );
}

2. Background Beams — animated gradient beams

// components/ui/background-beams.tsx
"use client";
import { cn } from "@/lib/utils";

export function BackgroundBeams({ className }: { className?: string }) {
  return (
    <div className={cn("absolute inset-0 overflow-hidden", className)}>
      <svg
        className="absolute h-full w-full"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <radialGradient id="beam1" cx="50%" cy="0%" r="50%">
            <stop offset="0%" stopColor="#6366f1" stopOpacity="0.3" />
            <stop offset="100%" stopColor="transparent" stopOpacity="0" />
          </radialGradient>
          <radialGradient = = = =>
            
            
          
        
        
        
        {/* Animated lines */}
        {[...Array(6)].map((_, i) => (
          
        ))}
      
    
  );
}


  () {
   (
    
  );
}

3. Spotlight — cursor-following light effect

// components/ui/spotlight.tsx
"use client";
import { useRef, useState, useCallback } from "react";
import { motion } from "framer-motion";
import { cn } from "@/lib/utils";

export function Spotlight({ className }: { className?: string }) {
  const divRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [opacity, setOpacity] = useState(0);

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    if (!divRef.current) return;
    const { left, top } = divRef.current.getBoundingClientRect();
    setPosition({ x: e.clientX - left, y: e.clientY - top });
  }, []);

  return (
    <div
      ref=
      =
      = => setOpacity(1)}
      onMouseLeave={() => setOpacity(0)}
      className={cn("relative overflow-hidden", className)}
    >
      
    
  );
}


  () {
   (
    
  );
}

4. Moving Border — animated gradient border

// components/ui/moving-border.tsx
"use client";
import { useRef } from "react";
import { motion, useAnimationFrame, useMotionTemplate, useMotionValue, useTransform } from "framer-motion";
import { cn } from "@/lib/utils";

export function MovingBorder({
  children,
  duration = 2000,
  className,
}: {
  children: React.ReactNode;
  duration?: number;
  className?: string;
}) {
  const pathRef = useRef<SVGRectElement>(null);
  const progress = useMotionValue(0);

  useAnimationFrame((time) => {
    const length = pathRef.current?.getTotalLength();
    if (length) {
      const pxPerMs = length / duration;
      progress.set((time * pxPerMs) % length);
    }
  });

  const x = useTransform(progress, (val) => pathRef.current?.getPointAtLength(val).x ?? 0);
  const y = useTransform(progress, (val) => pathRef.current?.getPointAtLength(val). ?? );
   transform = useMotionTemplate;

   (
    

5. Wavy Background — animated wave effect

// components/ui/wavy-background.tsx
"use client";
import { useEffect, useRef } from "react";
import { cn } from "@/lib/utils";
import { createNoise3D } from "simplex-noise";

export function WavyBackground({
  children,
  className,
  backgroundFill = "#0f0f0f",
  colors = ["#38bdf8", "#818cf8", "#c084fc"],
  speed = 0.001,
}: {
  children?: React.ReactNode;
  className?: string;
  backgroundFill?: string;
  colors?: string[];
  speed?: number;
}) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const noise = createNoise3D();

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d")!;
    let frame = 0;

    const resize = () => {
      canvas.width = canvas.offsetWidth;
      canvas.height = canvas.offsetHeight;
    };
    resize();
    .(, resize);

      = () => {
      ctx. = backgroundFill;
      ctx.(, , canvas., canvas.);

      colors.( {
        ctx.();
        ctx. = ;
        ctx. = color;
         ( x = ; x <= canvas.; x += ) {
           y = (x / , i * , frame * speed) *  + canvas. / ;
           (x === ) ctx.(x, y);
           ctx.(x, y);
        }
        ctx.();
      });

      frame++;
      (draw);
    };
    ();

      .(, resize);
  }, []);

   (
    
  );
}


  () {
   (
    
  );
}

Installation Helper

# Install all common deps at once
npm install framer-motion clsx tailwind-merge simplex-noise

# For TypeScript types
npm install -D @types/simplex-noise

Component Reference

Component	Effect	Use for
3D Card	Tilt on hover	Pricing, features
Background Beams	Gradient beam lines	Hero backgrounds
Spotlight	Cursor-following glow	Cards, panels
Moving Border	Animated border dot	CTAs, feature cards
Wavy Background	Canvas wave animation	Section backgrounds
Glowing Stars	Star particles	Dark hero sections
Evervault Card	Scrambling text on hover	Security/tech themes
Lamp	Cone of light from top	Hero sections
Macbook Scroll	Device reveal on scroll	Product showcases
Infinite Moving Cards	Scrolling testimonials	Social proof

Tips

• All components are dark-mode first — wrap in dark class or set darkMode: 'class' in Tailwind
• For performance, lazy-load canvas-heavy components with next/dynamic and ssr: false
• Framer Motion adds ~30KB to bundle — consider LazyMotion for code splitting
• Copy from ui.aceternity.com for the latest component versions