Soft aurora background of blurred gradient blobs drifting slowly. Pure CSS.
npx shadcn@latest add https://hyperblur.dev/r/aurora.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/aurora.tsx.
import { Aurora } from "@/components/hyperblur/aurora"
<div className="relative"><Aurora /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2f7bff", "#7fb3ff", "#19c3f5"] | Blob colors, cycled across four blobs. |
| speed | number | 1 | Drift speed multiplier. |
| blur | number | 80 | Blur radius of the blobs in pixels. |
| opacity | number | 0.55 | Overall opacity of the aurora. |