Premium & Brand

Aurora Background

Server Component

Animated aurora backdrop.

Import

tsx

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

bash

npx cronus-ui add aurora-background

Examples

Animated backdrop

Soft primary blobs drift behind centered hero content. Colour lives on the CTA; the headline stays on `text-fg`.

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">
    <h3 className="font-display text-4xl font-semibold leading-[1.05] tracking-tight sm:text-5xl text-fg">
      Ship something beautiful
    </h3>
    <p className="text-balance text-sm text-fg-secondary">
      Accessible, token-driven React components with premium motion baked in.
    </p>
    <Button variant="primary" size="lg">
      Get started
      <ArrowRight aria-hidden="true" />
    </Button>
  </div>
</AuroraBackground>