aceternity-ui_skill

Overview

This skill provides Aceternity UI: a collection of 100+ animated, production-ready React components built for Next.js with Tailwind CSS and Framer Motion. Components target hero sections, parallax, 3D effects, cards, loaders, and more, with full TypeScript support and dark mode. Components are copy-paste friendly and installable via the shadcn CLI or manually for direct customization.

How this skill works

Components are distributed as source files you add to your project (shadcn registry or manual copy). Most components require client-side rendering and Framer Motion; use the "use client" directive and lazy-load heavy visuals with dynamic imports when needed. Styling is Tailwind-first and components accept className overrides; utility helpers like a cn/twMerge wrapper are recommended. The shadcn registry can install named Aceternity components into components/ui automatically.

When to use it

• Add high-impact animated backgrounds or hero sections on marketing and landing pages
• Create interactive product cards, 3D effects, or motion-rich portfolios
• Implement scroll-driven parallax, sticky reveals, or storytelling layouts
• Enhance typography with typewriter, flip, or highlight text effects
• Swap in animated modals, tooltips, or loading indicators for polish

Best practices

• Use "use client" for components that rely on Framer Motion and client-side state
• Lazy-load heavy background or canvas components with next/dynamic and ssr: false
• Keep accessibility in mind: add ARIA labels and keyboard handlers to interactive elements
• Override styles with className and edit copied source files for bespoke behavior
• Prefer TypeScript prop types for safety and maintainability

Example use cases

• Hero section with BackgroundBeams, TypewriterEffect, and a MovingBorder CTA
• Product gallery using 3D Card effects and an Infinite Moving Cards carousel
• Long-form storytelling page with Sticky Scroll Reveal and Parallax images
• Landing page hero with Aurora Background, animated headings, and CTA animations
• Admin or marketing dashboard with animated loaders and interactive tooltips