Segmented rings that launch from a pulsing core and rotate as they expand, over faint guide circles and a crosshair. Each launch kicks the core.
Late Night Radio
npx shadcn@latest add https://hyperblur.dev/r/bg-beacon-rings.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-beacon-rings.tsx.
import { BgBeaconRings } from "@/components/hyperblur/bg-beacon-rings"
<div className="relative h-96"><BgBeaconRings y={60}><h1>Live now</h1></BgBeaconRings></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#7fb3ff" | Color of most rings and the guides. |
| accent | string | "#2f7bff" | Color of every third ring, the core glow and the backdrop tint. |
| background | string | "#04060b" | Fill color. |
| rings | number | 6 | Rings in flight at once, from 2 to 12. |
| x | number | 50 | Horizontal position of the core, in percent. |
| y | number | 50 | Vertical position of the core, in percent. |
| speed | number | 1 | Speed multiplier for the rings and the pulse. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |