Terminal
A terminal session that types prompt lines and streams output, with optional looping animation.
Install
pnpm add @fractaldesign/machines-uiimport '@fractaldesign/machines-ui/style.css';
import { GraphTerminal } from '@fractaldesign/machines-ui';Preview
a session, scripted
<GraphTerminal
title="SHELL"
lines={[
{ kind: 'prompt', text: 'pnpm dev' },
{ kind: 'output', text: ' VITE v5 ready in 312ms' },
{ kind: 'output', text: ' ➜ Local: http://localhost:5173/' }
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | Caption on the frame's top edge as `[ TITLE ]`. Uppercase, 1–2 words. |
| lines* | TerminalLine[] | — | Scripted session: prompt lines get typed character-by-character; output lines stream. |
| typeMs | number | 28 | Milliseconds per character (typing). Default 28. |
| streamMs | number | 14 | Milliseconds per character (streaming output). Default 14. |
| holdMs | number | 1600 | Milliseconds to hold the fully-revealed script before restarting. Default 1600. |
| loop | boolean | true | Loop the session. Default true. |
| animated | boolean | true | Animate the typing and streaming. Default true. Reduced motion shows full script. |
| label | string | 'a session, scripted' | Short caption under the art. |
| class | string | '' |
API
- class forwarded to the outer element
- motion runs live; set animated={false} to freeze
- a11y honours prefers-reduced-motion
Types
| Name | Kind | Description |
|---|---|---|
| TerminalLine | interface | |
| Seg | interface |
Theming
CSS custom properties this component reads.
- --font-sans
- --graph-accent
- --text-primary
- --text-secondary
Related
Built from
src/lib/components/animated/GraphTerminal.svelte