Boot Footer
A themed terminal-style footer bar with an animated ENTER key prompt and optional countdown display, designed to pair with BootScreen.
BootFooter renders a compact status bar at the bottom of a terminal boot UI. It shows either "Press ENTER to continue" or a countdown variant ("Auto-advance in N seconds or press ENTER now"), with an animated cycling button that pulses through theme-appropriate accent colours using Framer Motion.
Three built-in themes are available: classicDark (default), classicLight, and hacker.
Installation
npx shadcn@latest add @adv/boot-footerUsage
import BootFooter from '@/components/boot-footer';
<BootFooter
theme="classicDark"
countdownActive={true}
countdownValue={5}
onContinue={() => console.log('continue')}
/>Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
theme | "classicDark" | "classicLight" | "hacker" | "classicDark" | Visual theme controlling colours and button style. |
onContinue | () => void | — | Called when the user clicks the ENTER button. |
countdownValue | number | 5 | Current countdown value to display (seconds remaining). |
countdownActive | boolean | false | When true, shows the "Auto-advance in N seconds" copy instead of "Press ENTER". |
Magazine Grid
A pure calculation utility that paginates a list of sized grid items across fixed-size pages, calling onPaginate with the result. Renders nothing.
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.