Hero Sections
Full-bleed hero sections with animated backgrounds, typographic effects, and call-to-action patterns.
Aurora Hero
Block preview — compose from component imports
Aurora Hero
Atmospheric aurora background with centered headline, subtext, and dual CTA buttons.
Use for primary landing pages where atmosphere matters more than density. The aurora creates depth without competing with the message.
// Install the components used in this block
npx shadcn@latest add @aceternity/aurora-background
npx shadcn@latest add @aceternity/text-generate-effectLamp Hero
Block preview — compose from component imports
Lamp Hero
Dramatic lamp effect with expanding light beams revealing a headline below.
Reserve for product launch pages or single-message moments. The theatrical reveal demands a powerful, concise headline.
// Install the components used in this block
npx shadcn@latest add @aceternity/lamp-effectBeams Hero
Block preview — compose from component imports
Beams Hero
Background beams radiating behind a centered signup form or CTA.
Best for conversion-focused heroes where the form is the primary action. The beams direct energy toward the input fields.
// Install the components used in this block
npx shadcn@latest add @aceternity/background-beams
npx shadcn@latest add @aceternity/signup-formParallax Hero
Block preview — compose from component imports
Parallax Hero
Multi-row product images with parallax scrolling and an overlay headline.
Use when showcasing a portfolio of work or multiple product screenshots. The parallax communicates breadth and variety.
// Install the components used in this block
npx shadcn@latest add @aceternity/hero-parallax