fractalsvelte mascot fractalsvelte fractalsvelte
fractalsvelte mascot fractalsvelte fractalsvelte

Svelte 5 component · machines-ui · Animated

GraphTerminal

A terminal session that types prompt lines and streams output, with optional looping animation.

All components Source

Install

GraphTerminal is a Svelte 5 animated ASCII terminal component in @fractaldesign/machines-ui. It works in SvelteKit and in any Svelte 5 app.

pnpm add @fractaldesign/machines-ui

Import

import 
import '@fractaldesign/machines-ui/style.css';
import { GraphTerminal } from '@fractaldesign/machines-ui';

Usage

Example 
<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

NameTypeDefault
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 Milliseconds per character (typing). Default 28.28
streamMs number Milliseconds per character (streaming output). Default 14.14
holdMs number Milliseconds to hold the fully-revealed script before restarting. Default 1600.1600
loop boolean Loop the session. Default true.true
animated boolean Animate the typing and streaming. Default true. Reduced motion shows full script.true
label string Short caption under the art.'a session, scripted'
class string ''

Related components

GraphTicker A single rotating row of health tokens such as `[ OK ] api`, each keeping its own status colour.GraphTypewriter Types lines of text one character at a time behind a blinking cursor, then optionally clears and repeats.GraphWorkflow A directed workflow laid out in character-art: nodes as boxes stacked in layers, edges drawn between them,…ShuffleText Animates text in by sliding each character through a scramble strip, with optional colour interpolation and…TextTyping Types a line of text one character at a time, restarting when the text changes or the line becomes active…GraphAgni An ASCII fire that burns upward from a pit, with rising sparks and live sliders for the grid size, speed,…