Terminal Simulator

A dev-block that simulates a terminal session. Each line is revealed via <Sequence> and typed character-by-character with a substring + interpolate pattern. Once the visible line count exceeds the window, the inner container slides up via translateY so the latest line is always in view.

Installation

$ pnpm dlx shadcn@latest add @remocn/terminal-simulator

Usage

// 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.

Notes

Deterministic cursor

The blinking cursor uses Math.floor(frame / 15) % 2 === 0 rather than setInterval, so the animation is fully deterministic and renders the same on every machine.

Auto scroll

Once more lines have started than fit in the window, the entire content layer translates upward in lineHeight increments, simulating scroll without overflow.