Terminal Simulator
A terminal window that types a command, streams build steps, and hands the prompt back.
SceneScenes
terminal-simulator30fps · 960×540
Install
$ npx remotion-ui@latest add terminal-simulatorThe scene plays a full shell beat: the command types itself at the prompt, each step prints with a spinner, the spinner strokes into a check as the step resolves alongside its timing, and the prompt returns with a blinking caret — the signal a real terminal gives you when the work is done.
Steps resolve in order. Give a step a longer work (in seconds) when it should
visibly hold, and a tone of warn or error when it should not land clean.
Agent notes
Install first, then import the copied source component locally. AI guide →
Import
@/remotion/scenes/terminal-simulator- Use when: full-frame scenes, overlays, cards, and reusable video sections.
- Customize: command, steps, summary, prompt, plus copied source for timing, layout, colors, and typography.
- Rule: do not import this component from the
remotion-uinpm package; it is copied into your project.
Usage
Example
import { TerminalSimulator } from "@/remotion/scenes/terminal-simulator";
<TerminalSimulator command="pnpm build" summary="done in 4.2s" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| command | string | "pnpm registry:build" | Command typed at the prompt before anything runs. |
| steps | TerminalStep[] | - | Steps printed in order; each spins, then resolves to a glyph and timing. |
| summary | string | "6 blocks · 1.9 MB · done in 4.2s" | Dim line printed after the last step. |
| prompt | string | "~/remotion-ui" | Prompt prefix, usually a working directory. |
| title | string | "Build output" | Terminal window title. |
| shell | string | "zsh" | Shell label on the right of the header. |
| accentColor | string | "#E8B86D" | Prompt, spinner and glow color. |
| theme | "dark" | "light" | "dark" | Terminal palette. |
| speed | number | 1 | Animation speed multiplier. |