Modus UI

Aurora Background

Web (React)

A stunning, smooth animated aurora borealis background effect using Framer Motion.

A stunning, smooth animated aurora borealis background effect using Framer Motion. Built natively without heavy WebGL libraries.

Live Preview

Beautiful Aurora Background

Powered by Tailwind CSS and Framer Motion. Zero heavy WebGL dependencies, full native performance.

Installation

CLI

npx @modus-ui/cli add aurora-background

Manual

  1. Copy the code from the component tab.
  2. Create a file at components/ui/aurora-background.tsx.
  3. Paste the code.

Usage

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

export default function Example() {
  return (
    <AuroraBackground>
      <h1 className="relative z-10 text-5xl font-bold text-white">Hello World</h1>
    </AuroraBackground>
  );
}

Props

PropTypeDefaultDescription
childrenReactNode-The content to render on top of the aurora.
colors[string, string, string, string][...]The four colours of the aurora blobs.
showRadialGradientbooleantrueWhether to mask the bottom edge of the aurora.

Comments

  • No comments yet.