Terminal Cursor Zoom

Camera locked to the typing cursor, dollying across a terminal as a command types at high zoom

Installation

$ pnpm dlx shadcn@latest add @remocn/terminal-cursor-zoom

Usage

// src/Root.tsx
import { Composition } from "remotion";
import { TerminalCursorZoom } from "@/components/remocn/terminal-cursor-zoom";

const TerminalCursorZoomScene = () => (
  <TerminalCursorZoom command="npx shadcn add @remocn/terminal-simulator" />
);

export const RemotionRoot = () => (
  <Composition
    id="TerminalCursorZoom"
    component={TerminalCursorZoomScene}
    durationInFrames={90}
    fps={30}
    width={1280}
    height={720}
  />
);

The camera reads terminal-simulator's fixed layout to keep the cursor pinned, so it pairs with that component — npx shadcn add @remocn/terminal-cursor-zoom pulls it in automatically.

Props

Prop	Type	Default	Description
`command`	`string`	`"npx shadcn add @remocn/terminal-cursor-zoom"`	The single command line typed out and tracked by the camera
`zoom`	`number`	`2.8`	Camera scale while the cursor is pinned to screen center
`fontSize`	`number`	`20`	Monospace font size in pixels; the cursor geometry is derived from it
`prompt`	`string`	`"$"`	Prompt prefix shown before the command
`title`	`string`	`"~/code/remocn-demo"`	Title shown in the terminal window chrome
`charsPerFrame`	`number`	`1`	Typing speed passed through to the terminal; the camera mirrors it exactly
`chunkSize`	`number`	`1`	Characters revealed per step; the camera snaps to the same chunking
`speed`	`number`	`1`	Playback multiplier applied to both the typing and the camera
`className`	`string`	—	Optional className passed to the outer container