A boot sequence with a logo, a segmented progress bar and status rows that resolve one by one from WAIT to READY. Click to replay.
npx shadcn@latest add https://hyperblur.dev/r/hud-boot-screen.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hud-boot-screen.tsx.
import { HudBootScreen } from "@/components/hyperblur/hud-boot-screen"
<HudBootScreen title="Vector Lab" onComplete={() => console.log("ready")} />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Vector Lab" | Title next to the logo. |
| subtitle | string | "Boot sequence 2.4" | Monospace line under the title. |
| logo | ReactNode | Logo slot. A bracketed mark is shown when missing. | |
| rows | { label: string; value?: string }[] | Core, Shaders, Audio, Input | Status rows. Each shows its value, or readyLabel, once the bar passes its share. |
| duration | number | 3200 | Length of the sequence in milliseconds. |
| autoStart | boolean | true | Start on mount. When false a Start button waits for a click. |
| waitLabel | string | "Wait" | Text of a row that has not resolved yet. |
| readyLabel | string | "Ready" | Text of a resolved row without its own value. |
| accent | string | "#ff4d4d" | Progress bar, logo and ready marker color. |
| onComplete | () => void | Called when the bar reaches 100%. |