Aurora Background

The AuroraBackground uses an intricate combination of CSS gradients, SVG noise filters, and a repeating linear gradient animation to create a beautiful, organic aurora effect. It is completely driven by CSS and requires zero JavaScript to animate, ensuring maximum performance.

Live Preview

Installation

Props

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

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

2. Implementation Example

Render the component and customize its behavior by passing props:

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

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <AuroraBackground
        showRadialGradient{true}
        colors="example"
      >
        <div>Content goes here</div>
      </AuroraBackground>
    </div>
  );
}