Terminal

An animated terminal window that plays a sequence of lines with configurable delays and looping.

Default

An animated sequence simulating a project init flow.

terminal

<Terminal
lines={[
  { type: 'command', text: 'venator init dashboard', delay: 0 },
  { type: 'muted', text: 'Resolving dependencies...', delay: 800 },
  { type: 'success', text: 'Dependencies resolved', delay: 1200 },
  { type: 'success', text: 'Scaffold created in ./dashboard', delay: 1800 },
  { type: 'accent', text: 'Ready. Run cd dashboard && npm run dev', delay: 2400 },
]}
/>

Line types

All six type values rendered at delay: 0 for immediate display.

terminal

<Terminal
loop={false}
lines={[
  { type: 'command', text: 'npm run build', delay: 0 },
  { type: 'success', text: 'Build completed successfully', delay: 0 },
  { type: 'error', text: 'Module not found: ./missing', delay: 0 },
  { type: 'muted', text: 'Skipping optional peer deps...', delay: 0 },
  { type: 'dim', text: '3 files unchanged', delay: 0 },
  { type: 'accent', text: 'Deploy to production? (y/n)', delay: 0 },
]}
/>

No loop

Set loop={false} to play the sequence once and stop.

terminal

<Terminal
loop={false}
lines={[
  { type: 'command', text: 'venator build', delay: 0 },
  { type: 'success', text: 'Done in 1.2s', delay: 600 },
]}
/>

Props

Terminal

Prop	Type	Default	Description
`lines`	`TerminalLine[]`	—	Sequence to animate
`title`	`string`	`'terminal'`	Window title bar label
`loop`	`boolean`	`true`	Restarts animation after completion
`loopDelay`	`number`	`2000`	Ms to wait before restarting
`className`	`string`	`''`	Additional Tailwind classes

TerminalLine

Prop	Type	Default	Description
`type`	`'command' \| 'success' \| 'error' \| 'muted' \| 'dim' \| 'accent' \| 'warn'`	—	Visual style
`text`	`string`	—	Line content
`delay`	`number`	`0`	Ms from start to show this line