BootSequence

Staged system-init reveal — steps print on a cadence and resolve to [ OK ] / [ FAIL ], with optional glitch decode (reduced-motion aware).

● LIVE

SYSTEM BOOT // 0x00

core.init()

mount /dev/signal

calibrate sensors

uplink handshake

render pipeline

import { BootSequence } from "@/registry/okibi/ui/boot-sequence";export default function BootSequenceDemo() {  return (    <BootSequence      title="SYSTEM BOOT // 0x00"      trigger="view"      glitch      className="w-full max-w-md"      steps={[        { label: "core.init()" },        { label: "mount /dev/signal" },        { label: "calibrate sensors" },        { label: "uplink handshake", status: "fail" },        { label: "render pipeline" },      ]}    />  );}

npx shadcn@latest add https://okibi.cndr.dev/r/boot-sequence.json

Installation

Install the theme first, then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/boot-sequence.json

Add the okibi building blocks it composes: console-surface, glitch-text.

Copy the source from the Code tab above into components/ui/boot-sequence.tsx. It uses the cn helper and the okibi theme tokens — install the theme first if you haven't.

Usage

import { BootSequence } from "@/components/ui/boot-sequence"

<BootSequence
  title="SYSTEM BOOT // 0x00"
  trigger="view"
  steps={[
    { label: "core.init()" },
    { label: "mount /dev/signal" },
    { label: "uplink handshake", status: "fail" },
  ]}
/>

Examples

All clear

The clean baseline — every step resolves straight to [ OK ], no glitch, no failures.

● LIVE

SYSTEM BOOT // CLEAN

core.init()

mount /dev/signal

calibrate sensors

uplink handshake

render pipeline

import { BootSequence } from "@/registry/okibi/ui/boot-sequence";export default function BootSequencePlainDemo() {  return (    <BootSequence      title="SYSTEM BOOT // CLEAN"      trigger="view"      glitch={false}      className="w-full max-w-md"      steps={[        { label: "core.init()", status: "ok" },        { label: "mount /dev/signal", status: "ok" },        { label: "calibrate sensors", status: "ok" },        { label: "uplink handshake", status: "ok" },        { label: "render pipeline", status: "ok" },      ]}    />  );}

Cadence

Tune the print rate with cadence (milliseconds per step).

● LIVE

SYSTEM BOOT // FAST

core.init()

mount /dev/signal

calibrate sensors

warm cache

uplink handshake

render pipeline

import { BootSequence } from "@/registry/okibi/ui/boot-sequence";export default function BootSequenceCadenceDemo() {  return (    <BootSequence      title="SYSTEM BOOT // FAST"      trigger="view"      cadence={140}      className="w-full max-w-md"      steps={[        { label: "core.init()" },        { label: "mount /dev/signal" },        { label: "calibrate sensors" },        { label: "warm cache" },        { label: "uplink handshake" },        { label: "render pipeline" },      ]}    />  );}

API Reference

Prop	Type	Default	Description
`steps`	`{ label: string; status?: "ok" \| "fail" }[]`	–	The init steps to print and resolve.
`cadence`	`number`	`320`	Milliseconds between step reveals.
`trigger`	`"mount" \| "view"`	`"mount"`	Start on mount or when scrolled into view.
`glitch`	`boolean`	`false`	Decode each label through GlitchText.
`onComplete`	`() => void`	–	Fired once after the last step resolves.
`title`	`string`	–	Optional mono header title.

Accessibility

The panel is a live region: role='status' with aria-live='polite', so step progress is narrated as it resolves.
Status is conveyed by word — [ OK ] or [ FAIL ] — never by color alone.
The > prompt and the stutter-blink spinner glyph are decorative and marked aria-hidden.
Honors prefers-reduced-motion: every step renders already-resolved instantly, with no cadence, spinner, or glitch decode.
Treat steps as fixed once the sequence starts — rows are keyed by position, so mutating mid-run can smear reveal state across labels.

Guidelines

Use it for cold-start splashes, connection handshakes, and console empty-states.
Tune cadence to pace the reveal, and use trigger='view' to start the run when it scrolls into frame.
Set a step status of fail to surface a failed check with the destructive token.

Don't

Do not feed it steps you reorder or insert into while it is revealing.
Do not rely on the glitch decode for meaning — it is a cosmetic reveal that is skipped under reduced motion.
Do not lean on color to read status; the OK and FAIL words carry it for everyone.

BootSequence

On this page