Premium & Brand

Aurora Background

Animated aurora backdrop.

Import

tsx

import { AuroraBackground } from "@cooud-ui/ui";

bash

npx cooud-ui add aurora-background

Examples

Animated backdrop

An animated aurora gradient wrapping centered hero content — the brand's signature first impression.

Ship something beautiful

Accessible, token-driven React components with premium motion baked in.

tsx

<AuroraBackground className="relative flex min-h-48 items-center justify-center overflow-hidden rounded-2xl">
  <div className="flex max-w-lg flex-col items-center gap-4 px-6 py-12 text-center">
    <GradientText asChild>
      <h3 className="font-display text-4xl font-semibold leading-[1.05] tracking-tight sm:text-5xl">
        Ship something beautiful
      </h3>
    </GradientText>
    <p className="text-balance text-sm text-fg-secondary">
      Accessible, token-driven React components with premium motion baked in.
    </p>
    <Button variant="gradient" size="lg">
      Get started
      <ArrowRight aria-hidden="true" />
    </Button>
  </div>
</AuroraBackground>