A phosphor radar display with range rings, bearing ticks and a rotating sweep. Contacts flare as the beam passes and fade until the next turn, some with track labels.
18 vessels in range
Open fleet map
npx shadcn@latest add https://hyperblur.dev/r/bg-radar.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-radar.tsx.
import { BgRadar } from "@/components/hyperblur/bg-radar"
<div className="relative h-96"><BgRadar origin={[0.7, 0.5]}><h1>Fleet tracking</h1></BgRadar></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#1f3a33" | Color of rings, ticks and labels. Hex color. |
| accent | string | "#4dffb4" | Color of the sweep and contacts. Hex color. |
| background | string | "#030806" | Screen color. Hex color. |
| origin | [number, number] | [0.5, 0.5] | Center of the scope as fractions of width and height. |
| size | number | 1 | Scope radius relative to the container. |
| targets | number | 9 | Number of contacts, up to 40. |
| labels | boolean | true | Shows track labels on every third contact. |
| speed | number | 1 | Sweep speed. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |