A panel with corner brackets, a monospace header with a status chip and an optional scanning line over its content.
npx shadcn@latest add https://hyperblur.dev/r/hud-frame.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-frame.tsx.
import { HudFrame } from "@/components/hyperblur/hud-frame"
<HudFrame label="Render queue" status="Live"><p>48,210 frames</p></HudFrame>| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Telemetry" | Micro label at the left of the header. |
| code | string | "SYS-04" | Dim code shown after the label. Hidden when empty. |
| status | string | "Live" | Text of the status chip. Hidden when empty. |
| tone | "live" | "idle" | "warn" | "live" | Chip style. Live blinks the dot in the accent color, warn turns it amber. |
| scan | boolean | true | Run a slow scanning line down the panel. |
| accent | string | "#ff4d4d" | Bracket, scan line and live dot color. |
| children | ReactNode | Panel content. |