Aurora Background

Heroes 151

About

An animated canvas aurora background with multiple color variants (sunset, ocean, forest, lavender, ember, ice) that can wrap any content.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Aurora Background to your project and fits it to your theme.

Code

How Aurora Background is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { AuroraBackground } from "@/components/ui/aurora-background";

export default function AuroraBackgroundDemo() {
  return (
    <AuroraBackground
      variant="sunset"
      className="flex h-[400px] w-full items-center justify-center rounded-xl"
      childrenClassName="flex flex-col items-center justify-center gap-4 text-center px-6"
    >
      <h1 className="text-4xl font-bold text-white drop-shadow-lg md:text-6xl">
        Aurora Background
      </h1>
      <p className="max-w-md text-lg text-white/80">
        A living, animated canvas backdrop with multiple color variants.
      </p>
    </AuroraBackground>
  );
}