# Aurora hero

> Centered hero with a drifting aurora, dotted backdrop, announcement pill and staggered copy.

A shadcn/ui block from the [@velora](https://velora.colorlib.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/velora/hero-aurora).

- Page, with a live preview: https://shadcn.exchange/r/velora/hero-aurora
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/velora/hero-aurora-light-bda3f93d6260e94c.png
- Registry item: https://velora.colorlib.com/r/hero-aurora.json
- Categories: hero-sections
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://velora.colorlib.com/r/hero-aurora.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `utils`, `button`, `https://velora.colorlib.com/r/animated-gradient-text.json`, `https://velora.colorlib.com/r/aurora-background.json`, `https://velora.colorlib.com/r/blur-fade.json`, `https://velora.colorlib.com/r/grid-pattern.json`, `https://velora.colorlib.com/r/shimmer-button.json`

## Files

### `src/components/blocks/hero-aurora.tsx`

```tsx
import { ArrowRightIcon, SparklesIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import { AnimatedGradientText } from "@/components/velora/animated-gradient-text";
import { AuroraBackground } from "@/components/velora/aurora-background";
import { BlurFade } from "@/components/velora/blur-fade";
import { DotPattern } from "@/components/velora/grid-pattern";
import { ShimmerButton } from "@/components/velora/shimmer-button";

/**
 * Centered hero with a drifting aurora, a dotted backdrop and staggered
 * copy. Replace the copy and links; everything else re-themes from your
 * brand tokens.
 */
export function HeroAurora() {
  return (
    <section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:px-8">
      <AuroraBackground intensity="medium" />
      <DotPattern
        aria-hidden
        className="absolute inset-0 -z-10 size-full fill-foreground/10 [mask-image:radial-gradient(ellipse_at_center,black,transparent_70%)]"
      />

      <div className="relative mx-auto max-w-3xl text-center">
        <BlurFade>
          <a
            href="#"
            className="inline-flex items-center gap-2 rounded-full border bg-background/60 px-3 py-1 text-sm text-muted-foreground backdrop-blur transition-colors hover:text-foreground"
          >
            <SparklesIcon className="size-4 text-primary" />
            Announcing our Series A
            <ArrowRightIcon className="size-3.5" />
          </a>
        </BlurFade>

        <h1 className="mt-8 text-4xl font-semibold tracking-tight text-balance sm:text-6xl">
          The workspace where{" "}
          <AnimatedGradientText>ideas ship</AnimatedGradientText>
        </h1>

        <p className="mx-auto mt-6 max-w-xl text-lg text-pretty text-muted-foreground">
          Plan, build and launch in one calm place. Acme keeps your roadmap,
          docs and releases in sync — so your team can focus on the work.
        </p>

        <BlurFade delay={0.3}>
          <div className="mt-10 flex flex-col items-center justify-center gap-3 sm:flex-row">
            <ShimmerButton>Start for free</ShimmerButton>
            <Button variant="ghost" size="lg" asChild>
              <a href="#">
                Book a demo <ArrowRightIcon />
              </a>
            </Button>
          </div>
        </BlurFade>

        <BlurFade delay={0.4}>
          <p className="mt-8 text-sm text-muted-foreground">
            Free for teams up to 10 · No credit card required
          </p>
        </BlurFade>
      </div>
    </section>
  );
}
```