Wide pastel aurora curtains that drift slowly, with a gentle bloom that follows the pointer and tiny motes floating upward.
Breathe in for four
npx shadcn@latest add https://hyperblur.dev/r/bg-soft-aurora.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-soft-aurora.tsx.
import { BgSoftAurora } from "@/components/hyperblur/bg-soft-aurora"
<div className="relative h-96"><BgSoftAurora><h1>Breathe</h1></BgSoftAurora></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#9ec5ff", "#c8b4ff", "#9fe8d2", "#ffc6e0"] | One color per curtain, from top to bottom. |
| accent | string | "#e8f0ff" | Color of the bloom and the floating motes. |
| background | string | "#07080d" | Sky color behind the curtains. |
| motes | number | 40 | Number of floating motes, up to 160. Set 0 to hide them. |
| intensity | number | 1 | Brightness of the curtains and the bloom. |
| speed | number | 1 | Speed of the drift. |
| children | ReactNode | Content rendered on top of the sky. |