Terminal Simulator

Installation

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

Component code

The exact file shadcn add copies into your project.

Usage

Everything lives on one black canvas and a single camera flies over it — nothing slides in from a screen edge. The camera holds on the intro headline, creeps left, then suddenly accelerates across to the command panel (package-manager tabs + a syntax-coloured install command with the package name highlighted), pushes in slowly while it types — leaving the trailing motion-blur copies — then pulls back, descends, and punches in on the green focus terminal as it types its output. Fast camera moves draw a velocity-driven ghost trail; holds are dead still. Output reveals in bursts (chunked, not char-by-char), and any line ending in ... freezes the frame for 18 frames — or set pause explicitly. Everything is driven by the current frame, so scrubbing and rendering are fully deterministic.

Pass intro={null} or command={null} to skip a station — the camera path closes the gap automatically.

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

const InstallScene = () => (
  <TerminalSimulator
    intro="*work* one step at a *time.*"
    command={{ managers: ["npm", "pnpm", "yarn", "bun"], text: "npm install One Tool" }}
    lines={[
      { text: "{labels: ['bug']})", type: "log", delay: 0 },
      { text: "→   label added", type: "success", delay: 6 },
      { text: "$", type: "log", delay: 10 },
      { text: "One task", type: "command", delay: 4 },
    ]}
  />
);

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

Intro headline

intro is a single line rendered in the sans stack, centered. Wrap words in *asterisks* to paint them with the accent gradient (blue → violet); everything else stays white. Set intro={null} to skip straight to the command panel.

Focus terminal lines

The final station renders each line large and zoomed, right of the green accent bar. command lines are white and carry the blinking accent cursor (the last one keeps it after it finishes typing); log lines are dim, success lines take the accent green, error lines red. zoom sets the landing zoom of the final punch (1.5x by default, 2.4x with zoom on).

Props