Aurora Background

A highly visual, zero-dependency background component that creates a continuously animating aurora borealis effect. Perfect for hero sections and modern landing pages, achieved through lightweight CSS repeating gradients and CSS mix-blend-mode operations.

Aurora UI

Zero dependencies. Pure performance.

Installation

Copy the React component into your project:

tsx
import React from "react";

export interface AuroraBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
}

export const AuroraBackground = ({
  className = "",
  children,
  ...props
}: AuroraBackgroundProps) => {
  return (
    <div className={`bare-aurora-wrapper ${className}`} {...props}>
      <div className="bare-aurora-container">
        <div className="bare-aurora-gradient" />
      </div>
      <div className="bare-aurora-content">{children}</div>
    </div>
  );
};

Usage

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

export default function HeroSection() {
  return (
    <AuroraBackground>
      <div>
        <h1>Welcome to the Future</h1>
        <p>This is a stunning aurora background.</p>
      </div>
    </AuroraBackground>
  );
}