Motion UIComponentsComponent

Terminal session

A CLI session that types commands in and fades output lines up as each step completes.

npx shadcn@latest add @motion/terminal-session

API reference

Components

<TerminalSession />

The height-stable typing terminal body: drives useTerminalSession, reserves the final session height from mount via an invisible full-session sizer, types the command lines and fades the output lines in over it, rests an idle caret at the prompt when finished, and exposes an sr-only spoken transcript for assistive tech (the visible transcript is aria-hidden). Handles all three reduced-motion tiers itself. Compose it inside your own window chrome (e.g. BrowserWindow + BrowserChromeBar).

lines

TerminalLine[]

The session to play, top to bottom. Content, not feel.

typingSpeedMs?

number = 55

Base milliseconds per keystroke for command lines. Lower is faster. Defaults to 55.

startDelayMs?

number = 400

Milliseconds before the first line starts typing. Defaults to 400.

outputDelayMs?

number = 520

Milliseconds an output line rests after fading in before the session advances. Defaults to 520.

label?

string = "Terminal session"

The lead-in for the sr-only spoken transcript, read as "{label}: {full transcript}". Content - name your session. Defaults to "Terminal session".

className?

string

Merged onto the scrolling body wrapper.

Hooks

useTerminalSession

The headless session controller. Reveals one line at a time: active is the index currently animating; a command line advances on its Typewriter's completion, an output line on a finite timeout after it fades in. A single setTimeout chain, never a render loop, fully cleared on unmount. When disabled, the whole session is shown immediately.

useTerminalSession(count: number, options: UseTerminalSessionOptions): TerminalSessionState

Returns

active

number

Index of the line currently being revealed; -1 before the first line starts, count once every line is shown.

advance

() => void

Fire when the active line finishes to schedule the next one (command lines call it on their Typewriter's completion, output lines on a short timeout after they fade in).

done

boolean

true once every line has been revealed.