# Terminal Simulator
URL: https://remocn.dev/docs/ui-blocks/terminal-simulator

A console window that types out commands and rolls older lines off the top

- Install: `npx shadcn@latest add @remocn/terminal-simulator`
- Vibe: tech
- Natural length: 240f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/terminal-simulator
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TerminalSimulator } from "@/components/remocn/terminal-simulator";

const TerminalSimulatorScene = () => (
  <TerminalSimulator
    lines={[
      { text: "npm run build", type: "command" },
      { text: "Compiled successfully", type: "success", delay: 14 },
    ]}
  />
);

export const RemotionRoot = () => (
  <Composition
    id="TerminalSimulator"
    component={TerminalSimulatorScene}
    durationInFrames={240}
    fps={30}
    width={1280}
    height={720}
  />
);
```

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `Array<{ text: string; type: 'command' \| 'log' \| 'success' \| 'error'; delay?: number }>` | — | The lines to render. `delay` is the frame gap before the line starts typing. |
| `prompt` | `string` | `"$"` | Prompt prefix shown before `command` lines |
| `title` | `string` | `"~/projects/remocn"` | Title shown in the window chrome bar |
| `background` | `string` | `"#0a0a0a"` | Terminal background color |
| `chromeColor` | `string` | `"#1a1a1a"` | Window chrome bar color |
| `fontSize` | `number` | `18` | Monospace font size in pixels |
| `charsPerFrame` | `number` | `1` | Typing speed: how many characters appear per frame |
| `className` | `string` | — | Optional className passed to the outer container |

## Use when
- Demoing a CLI tool install sequence (`npm install`, `npx shadcn add`, build output).
- Showing an AI agent or script executing a multi-step task in a terminal session.
- A developer tool launch video needs the authentic feel of commands running and output streaming.

## Don't use when
- You only need to type a single short string — use `typewriter` instead, which is lighter and pairs with any layout.
- The code should be displayed as a formatted, highlighted editor window — use `glass-code-block` instead.