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

tsx

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

Props9

Prop	Type	Default
command	string"npx shadcn add @remocn/terminal-cursor-zoom" The single command line typed out and tracked by the camera
zoom	number2.8 Camera scale while the cursor is pinned to screen center
fontSize	number20 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	number1 Typing speed passed through to the terminal; the camera mirrors it exactly
chunkSize	number1 Characters revealed per step; the camera snaps to the same chunking
speed	number1 Playback multiplier applied to both the typing and the camera
className	string— Optional className passed to the outer container

commandstring
The single command line typed out and tracked by the camera
Default"npx shadcn add @remocn/terminal-cursor-zoom"
zoomnumber
Camera scale while the cursor is pinned to screen center
Default2.8
fontSizenumber
Monospace font size in pixels; the cursor geometry is derived from it
Default20
promptstring
Prompt prefix shown before the command
Default"$"
titlestring
Title shown in the terminal window chrome
Default"~/code/remocn-demo"
charsPerFramenumber
Typing speed passed through to the terminal; the camera mirrors it exactly
Default1
chunkSizenumber
Characters revealed per step; the camera snaps to the same chunking
Default1
speednumber
Playback multiplier applied to both the typing and the camera
Default1
classNamestring
Optional className passed to the outer container