Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA background of blurred, slowly drifting colored light with vertical curtains, drawn with CSS layers.
Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.
import { AuroraBackground } from "@/components/ui/aurora-background"<section className="relative isolate overflow-hidden">
<AuroraBackground className="-z-10" />
<h1>Hero content</h1>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | chart-1, chart-3, chart-2, chart-1 | Colors of the light from left to right. Any CSS color or var(). |
duration | number | 22 | Seconds for one drift of the light. Higher is calmer. |
intensity | number | 0.75 | Opacity of the light, 0 to 1. |
blur | number | 64 | Blur radius of the light in pixels. |
curtains | boolean | true | Draw fine vertical curtains through the light. |
radialMask | boolean | true | Fade the light toward the bottom and sides. |
Also accepts all <div> props except children.
absolute inset-0) and is aria-hidden and pointer-events-none.