Terminal

Usage

import { Terminal, type TerminalStep } from '@wdzyi/ui';

// Outside the render, or memoised: a new script plays from the start.
const script: TerminalStep[] = [
  {
    command: 'pnpm add @wdzyi/ui',
    output: [
      { text: '@wdzyi/ui 0.1.0', delay: 400, progress: 1400 },
      { text: 'added 1 package in 4.2s', delay: 300 },
    ],
  },
  {
    command: 'pnpm dev',
    pace: 24,
    output: [{ text: 'Ready in 0.9s', delay: 900, tone: 'success' }],
  },
];

<Terminal script={script} prompt='~/site $' onDone={showSite} className='h-80' />

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

scriptTerminalStep[]

The commands in order. Each has its command, how long the prompt waits before typing, the pace of a key, and the lines it prints. A line has its text, a delay after the one before, a tone of success, error or muted, replace to write over the line before, and progress for a bar that fills over that many ms.

titlestring = 'zsh'

The shell’s name, in the title bar.

promptstring = '$'

What comes before each command.

onDone() => void

Called once the last command’s output is in, back at a fresh prompt.

classNamestring

Added to the window. Give it a height, and it scrolls with the newest line.

Notes

• A person’s keys take about 100ms each, anywhere from about half that to half as much again, a touch longer on a shifted key and quicker through a repeated one, with a pause of a quarter to half a second before a word that needs thought, such as a package or a path. A pace of 20 or so is an agent, quick and even. Return comes 260ms after the last key.
• Each line arrives after its own delay. A progress bar fills in fits and starts, with the odd stall and burst, and the next line waits for it. A line marked replace writes over the one before, as a counter ticking over or a status resolving does.
• The cursor is a block one cell wide. It blinks every 1.06s while the prompt waits, holds still while keys go in, and hides while a command runs, as most tools hide it.
• Copy takes the commands only, a line each. The window follows the newest line unless someone has scrolled back to read, and a narrow one draws a shorter bar.
• With reduced motion, the whole session is there at once and the cursor holds still.