Wensity

Aurora Background

Pro

Aurora background of blurred light on Framer Motion, with grain that kills banding.

show offambientauroracanvasframer motion
Aurora Background component preview

Overview

Aurora Background is a React and Tailwind CSS aurora gradient background for hero sections, in Next.js or any React app, with no canvas or WebGL. A few heavily blurred color blobs drift slowly on transform and scale through Framer Motion, and a fractal noise overlay breaks up the banding large gradients usually show. The blur is contained in its own paint layer, content renders above it as children, and the blob set, blur, grain, and radius are props. It fills its parent unless you pass minHeight, so give the parent a height. Reduced motion parks every blob in place.

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add ambient-aurora-canvas

Usage

Import AmbientAuroraCanvas from @/components/wensity/ambient-aurora-canvas and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { AmbientAuroraCanvas } from "@/components/wensity/ambient-aurora-canvas";


export default function Example() {
  return (
    <AmbientAuroraCanvas minHeight={420}>
      <div className="grid h-full place-items-center p-10 text-center text-white">
        <div>
          <h1 className="font-heading text-5xl font-bold">Light, made matte.</h1>
          <p className="mt-3 text-white/70">Premium ambient lighting at near-zero render cost.</p>
        </div>
      </div>
    </AmbientAuroraCanvas>
  );
}

Props

PropTypeDefaultDescription
blobsAuroraBlob[]-Custom blob set. Defaults to a chili-led palette.
blurnumber110Blur radius in pixels.
grainbooleantrueShow the matte grain overlay.
radiusnumber24Border radius in pixels.
minHeightnumber-Optional fixed height. Otherwise fills the parent.
childrenReact.ReactNode-Optional content rendered above the aurora.

Related components

  • Split-Flap Display component preview

    Split-Flap Display

    A ceramic and graphite split-flap device that ripples each flap into your message.

  • Interactive 3D Globe component preview

    Interactive 3D Globe

    A 3D Earth lit day and night from the real sun position, wrapped in a soft atmosphere, with smooth drag-to-orbit controls.

  • Animated Code Diff Viewer component preview

    Animated Code Diff Viewer

    Inline or toggled code diffs rendered inside the same polished code block frame, flipping between before and after.

  • Animated Terminal component preview

    Animated Terminal

    A terminal UI with self-typing commands, CRT phosphor glow and scanlines, streaming output that never re-renders a line.

Featured in React animated backgrounds.