| name | aceternity-ui |
| description | Aceternity UI — premium copy-paste React & Next.js UI components built with Tailwind CSS and Motion (Framer Motion). Covers backgrounds, cards, text effects, buttons, loaders, navigation, inputs, overlays, carousels, grids, 3D, cursors, plus shadcn-compatible section blocks. Use when the user wants famous animated UI components (spotlight, sparkles, aurora background, 3D card, bento grid, magnetic button, typewriter, moving border, hero parallax, etc.). |
| license | Reference only — component concepts and patterns from ui.aceternity.com; build original implementations. |
Aceternity UI — Component Library
Aceternity UI is a free (plus paid All-Access) library of React/Next.js components with Tailwind CSS + Motion (Framer Motion) + microinteractions, shadcn-compatible. This skill catalogs the components so you can recreate them.
Backgrounds & Effects
- Sparkles — configurable sparkle particles as background or standalone
- Background Gradient — animated gradient behind any element
- Gradient Animation — smooth gradient position animation
- Wavy Background — moving wave shapes
- Background Boxes — full-width boxes that highlight on hover
- Background Beams — beams following an SVG path
- Background Beams With Collision — exploding beams
- Background Lines — SVG paths animating in a wave pattern (hero bg)
- Aurora Background — subtle aurora / southern-lights gradient
- Meteors — beam streaks in a container
- Glowing Stars — star field that animates on hover
- Shooting Stars and Stars — shooting stars over a starry sky
- Vortex — wavy, swirly vortex bg for CTAs
- Cloud Shader — procedural drifting clouds (props: speed/count/colors)
- Chromatic Image — responsive color separation + displacement + tilt
- Spotlight / Spotlight New — radial gradient spotlight effects
- Canvas Reveal Effect — dot background that expands on hover
- SVG Mask Effect — mask reveal on hover
- Tracing Beam — beam following an SVG path on scroll (length adjusts with speed)
- Lamp Effect — Linear-style section header with lamp glow
- Grid and Dot Backgrounds — grid/dot patterns
- Glowing Effect — cursor-style adaptive border glow
- Google Gemini Effect — SVG beam effect as on Google Gemini
- Webcam Pixel Grid — real-time webcam pixel grid (retro)
- Images Badge — badge revealing more images on hover
- Parallax Hero Images — mouse-driven parallax with blur-fade-in
- Scales — repeating diagonal/horizontal/vertical line pattern
- Dotted Glow Background — dotted bg with opacity + glow animation
- Background Ripple Effect — grid of cells that ripple on click
Cards
- Keyboard — mac-style keyboard with mechanical key sounds
- Terminal — mac-style terminal with bash highlighting + typewriter
- Tooltip Card — card with a pointer-following tooltip
- ASCII Art — any image to ASCII art (charset/colors/animations)
- Pixelated Canvas — image to pixelated canvas with mouse distortion
- 3D Card Effect — perspective card that elevates on hover
- Evervault Card — hover reveal + encrypted text + mixed gradient
- Card Stack — cards stacking after an interval (testimonials)
- Card Hover Effect — effect slides to the hovered card
- Wobble Card — translates/scales on mousemove
- Expandable Card — click to expand and show more info
- Card Spotlight — radial gradient spotlight reveal
- Focus Cards — hover focuses one card, blurs the rest
- Infinite Moving Cards — cards moving in an infinite loop
- Draggable Card — tiltable, draggable, jumps on bounds
- Comet Card — Perplexity Comet-style 3D tilt card
- Glare Card — Linear-style glare on hover
- Direction Aware Hover — fill from cursor-side
Text Effects
- Canvas Text — canvas-drawn curved-line text clipped to shape
- Encrypted Text — gibberish-to-text reveal
- Layout Text Flip — flips through words changing layout
- Colourful Text — multiple colors/filter/scale effects
- Squiggly Text — SVG turbulence + displacement squiggle
- Text Generate Effect — fades in text word-by-word on load
- Typewriter Effect — typing animation
- Flip Words — flips through a list of words
- Text Hover Effect — x.ai-style gradient outline on hover
- Container Text Flip — container flipping width through words
- Hero Highlight — highlight background behind text
- Text Reveal Card — mousemove reveals text at card bottom
- Text Flipping Board — split-flap (Vestaboard-style) character flips
Buttons
- Magnetic Button — drifts toward cursor with spring return
- Noise Background — animated gradients + noise texture
- Tailwind CSS Buttons — curated battle-tested Tailwind buttons
- Hover Border Gradient — gradient border expands on hover
- Moving Border — border that moves around the container
- Stateful Button — loading → success states
Loaders
- Multi Step Loader — step-based progress loader
- Loader — simple minimal loaders
Navigation
- Notch — floating configurable notch (top/bottom), animated active state
- Floating Navbar — sticky navbar that hides on scroll, reveals on scroll-up
- Navbar Menu — animates children on hover, big nav
- Sidebar — expandable on hover, responsive, dark mode
- Floating Dock — mac-style floating dock nav
- Tabs — animated tab background switching
- Resizable Navbar — changes width on scroll
- Sticky Banner — sticks to top, hides on scroll-down
Inputs & Forms
- Signup Form — shadcn input/label + framer motion
- Placeholders And Vanish Input — sliding placeholders, vanish on submit
- File Upload — grid bg + drag-drop + microinteractions
- Gooey Input — search input with gooey SVG filter + shared layout
Overlays & Popovers
- Dither Shader — real-time ordered dithering (pixel-art retro)
- Animated Modal — compound modal with animated transitions
- Animated Tooltip — pointer-following tooltip
- Link Preview — dynamic link previews
Carousels & Sliders
- Images Slider — full-page image slider, keyboard nav
- Carousel — customizable with microinteractions
- Apple Cards Carousel — apple.com-style minimal carousel
- Animated Testimonials — minimal testimonials with image + quote
Layout & Grid
- Layout Grid — grid item animation on click (framer layout)
- Bento Grid — skewed grid layout with title/description/header
- Container Cover — wraps children with beams + space, hover reveal speed
Data & Visualization
- GitHub Globe — GitHub-homepage globe animation, interactive
- World Map — programmatic world map with animated lines/dots
- Timeline — sticky header + scroll beam follow
- Compare — slide/drag compare between two images
- Code Block — configurable code block (react-syntax-highlighter)
Cursor & Pointer
- Following Pointer — custom pointer that follows mouse
- Pointer Highlight — highlights text in view with pointer + border
- Lens — zoom into images/videos on hover
3D
- 3D Globe — realistic globe with tooltips
- 3D Pin — gradient pin animating on hover
- 3D Marquee — 3D marquee grid (testimonials/heroes)
Scroll & Parallax
- Parallax Scroll — grid where columns scroll opposite directions
- Sticky Scroll Reveal — sticky container, text reveals on scroll
- Macbook Scroll — Fey.com-style image coming out of the screen
- Container Scroll Animation — 3D rotation on scroll (hero)
- Hero Parallax — rotation/translation/opacity scroll effect
Section Blocks (shadcn-compatible, All-Access)
- Hero Sections (23+), Logo Clouds (6+), Bento Grids (6+), CTA Sections (6+), Testimonials (7+), Team Sections (4+), Empty States (5+), Feature Sections (22+), Pricing Sections (6+), Cards (4+), Navbars (7+), Footers (4+), Login and Signup (6+), Contact Sections (4+), Blog Sections (4+), Blog Content Sections (2+), FAQs (4+), Sidebars (3+), Stats Sections (4+), Backgrounds (11+), Shaders (3+), Illustrations (22+), Text Animations (4+)
Recreating Aceternity Components
Standard structure for a recreated component:
- Tech: React + Tailwind CSS + Motion (
motion/react). Tailwind v4 uses CSS @theme for tokens; shadcn uses CSS variables.
- Motion patterns: use
useMotionValue, useSpring, useTransform, useScroll, useInView for the signature effects.
- Tailwind utilities needed:
clip-path, backdrop-blur, custom keyframes, perspective, transform-style: preserve-3d.
- Deliver a single self-contained
.tsx component with the same props as the original (className passthrough, motion props) plus a short usage example.
- For text splitting: use a tiny
splitWords/splitChars helper, wrap each in motion.span.
Usage
When the user asks for a specific famous component ("make a bento grid", "add sparkles to the hero", "spotlight effect", "aurora background", "moving border button"), find it above and build it with the standard structure. If they ask "make it like Aceternity" or "premium components", offer 2-3 relevant components from the catalog.
