Terminal Simulator

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

Installation

$ pnpm dlx 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}
  />
);

Props8

Prop	Type	Default
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	number18 Monospace font size in pixels
charsPerFrame	number1 Typing speed: how many characters appear per frame
className	string— Optional className passed to the outer container

linesArray<{ text: string; type: 'command' | 'log' | 'success' | 'error'; delay?: number }>
The lines to render. `delay` is the frame gap before the line starts typing.
promptstring
Prompt prefix shown before `command` lines
Default"$"
titlestring
Title shown in the window chrome bar
Default"~/projects/remocn"
backgroundstring
Terminal background color
Default"#0a0a0a"
chromeColorstring
Window chrome bar color
Default"#1a1a1a"
fontSizenumber
Monospace font size in pixels
Default18
charsPerFramenumber
Typing speed: how many characters appear per frame
Default1
classNamestring
Optional className passed to the outer container