A slowly rotating burst of light rays that split into spectrum colors from a bright core that follows the pointer.
Spectrum 4 is here
Wide gamut color, now on every display.
npx shadcn@latest add https://hyperblur.dev/r/bg-prism-burst.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-prism-burst.tsx.
import { BgPrismBurst } from "@/components/hyperblur/bg-prism-burst"
<div className="relative h-96"><BgPrismBurst rays={28}><h1>Spectrum</h1></BgPrismBurst></div>| Prop | Type | Default | Description |
|---|---|---|---|
| accent | string | "#cfe0ff" | Tint of the core and the halo around it. |
| background | string | "#050508" | Fill color behind the rays. |
| rays | number | 22 | Number of rays, from 4 to 60. |
| spread | number | 1 | Angular width of each ray and its spectrum split. |
| intensity | number | 1 | Brightness of the rays and the halo. |
| speed | number | 1 | Rotation and shimmer speed. |
| children | ReactNode | Content rendered on top of the burst. |