Boot Screen

A full-screen terminal boot sequence animation with theme-aware text colours, typewriter greeting, countdown, and an optional audio callback API. Composes BootFooter and BlinkingCursor.

TerminalBoot fills the viewport and streams terminal-style log lines, followed by a typewriter greeting and a countdown before calling onComplete. It composes BootFooter and BlinkingCursor internally.

The boot message sequence is fully customisable via the messages prop — swap out lines, timing constants, greeting text, and system status checks. Audio is decoupled: pass audioCallbacks to hook in sound effects without any app-specific audio dependency.

SSR note — Load with dynamic(() => import(...), { ssr: false }). The component renders fixed inset-0 so it should be conditionally mounted.

Installation

npx shadcn@latest add @adv/boot-screen

Usage

import dynamic from 'next/dynamic';
import { useState } from 'react';

const TerminalBoot = dynamic(
  () => import('@/components/boot-screen'),
  { ssr: false }
);

export default function App() {
  const [booting, setBooting] = useState(true);

  return booting ? (
    <TerminalBoot onComplete={() => setBooting(false)} />
  ) : (
    <main>Your app here</main>
  );
}

Custom messages

import type { BootMessages } from '@/components/boot-screen';

const customMessages: BootMessages = {
  greetingText: 'Hello, World!',
  preGreetingSequence: [
    { type: 'regular', text: '[BOOT]   Starting up...' },
  ],
  postGreetingSequence: [
    { type: 'regular', text: '[STATUS]  Ready.', color: 'green' },
  ],
  systemStatusChecks: ['Networking', 'Storage'],
  animationTiming: {
    BOOT_LINE_MIN_DELAY: 1,
    BOOT_LINE_MAX_DELAY: 5,
    COUNTER_SLOW: 80,
    COUNTER_FAST: 15,
    TYPING_SPEED: 8,
    CURSOR_INITIAL_DURATION: 1500,
    CURSOR_NORMAL: 0.4,
    GREETING_COUNTDOWN_INTERVAL: 300,
    FOOTER_COUNTDOWN_INTERVAL: 1000,
  },
};

<TerminalBoot messages={customMessages} onComplete={() => {}} />

Example

TerminalBoot plays a terminal-style boot animation then calls onComplete.

Props

Prop	Type	Default	Description
`onComplete`	`() => void`	—	Required. Called when the countdown expires or the user presses Enter.
`theme`	`"classicDark" \| "classicLight" \| "hacker"`	system theme	Overrides the automatic dark/light detection.
`messages`	`BootMessages`	built-in sequence	Custom boot sequence data and timing.
`audioCallbacks`	`{ onLineAdded?: () => void; onComplete?: () => void }`	—	Hook into key moments for sound effects.

BootLine

Field	Type	Description
`type`	`"regular" \| "counter" \| "status-check" \| "checkmark"`	How the line is rendered/animated.
`text`	`string`	Display text.
`color`	`string?`	Named colour key: `default`, `green`, `red`, `yellow`, `blue`, `cyan`, `magenta`, `white`, `gray`.
`baseText`	`string?`	Base text for `counter` type (prefix before the `(n/total)` part).
`total`	`number?`	Total count for `counter` type.