Terminal Simulator

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