Ambient Aurora Canvas

Pro

Pure-CSS atmospheric lighting with heavy blur and a noise overlay that kills banding.

show offambientauroracanvasframer motion

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

 1import { AmbientAuroraCanvas } from "@/components/wensity/ambient-aurora-canvas";
 2
 3export default function Example() {
 4  return (
 5    <AmbientAuroraCanvas minHeight={420}>
 6      <div className="grid h-full place-items-center p-10 text-center text-white">
 7        <div>
 8          <h1 className="font-heading text-5xl font-bold">Light, made matte.</h1>
 9          <p className="mt-3 text-white/70">Premium ambient lighting at near-zero render cost.</p>
10        </div>
11      </div>
12    </AmbientAuroraCanvas>
13  );
14}

Props

Prop	Type	Default	Description
`blobs`	AuroraBlob[]	-	Custom blob set. Defaults to a chili-led palette.
`blur`	number	110	Blur radius in pixels.
`grain`	boolean	true	Show the matte grain overlay.
`radius`	number	24	Border radius in pixels.
`minHeight`	number	-	Optional fixed height. Otherwise fills the parent.
`children`	React.ReactNode	-	Optional content rendered above the aurora.