Aurora curtains made of fine vertical rays that sway and shimmer over a night ridge, with twinkling stars and a light film grain. Pure CSS and SVG, no canvas.
Chase the lights
Clear skies after 22:00. Small groups, warm suits included.
npx shadcn@latest add https://hyperblur.dev/r/bg-polar-veil.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-polar-veil.tsx.
import { BgPolarVeil } from "@/components/hyperblur/bg-polar-veil"
<div className="relative h-96"><BgPolarVeil><h1>Northern lights</h1></BgPolarVeil></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#3cf2b0", "#2f7bff", "#b26cff"] | One color per curtain, from the front curtain to the back one. |
| background | string | "#04060b" | Night sky color. |
| stars | number | 46 | Number of twinkling stars, up to 200. |
| grain | number | 0.16 | Opacity of the film grain, from 0 to 1. Set 0 to remove it. |
| horizon | boolean | true | Shows the mountain ridge silhouette at the bottom. |
| speed | number | 1 | Speed multiplier for the sway and the ray shimmer. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |