Synthetic Screen Recording (Remotion TerminalScene)

Synthetic Screen Recording (Remotion TerminalScene)

Decision this skill answers: When the user wants a screen-recording-looking demo of a terminal, CLI tool, or coding workflow — do I capture the real desktop (OS screen recording via screen_recorder, Windows-MCP, Cap, or Playwright), or do I synthesize it in Remotion with the TerminalScene component?

Heuristic: If the agent can author the exact command/output sequence in advance, synthesize. Only capture live when the real behavior is unpredictable, needs a real app UI, or the user explicitly asked for a real recording.

Why this exists

v3 of the Video Production Buddy showcase tried to use Windows-MCP + screen_recorder to drive a Git-Bash window for the install walkthrough. It stalled on window positioning, focus races, and taskbar privacy concerns. We pivoted to pure Remotion rendering — a React component named TerminalScene that draws a fake terminal and types commands character-by-character. The output is visually indistinguishable from a real screen recording (same traffic-light window chrome, blinking cursor, scrolling output) but deterministic, privacy-safe, pixel-perfect at 1080p, and pace-controllable to the frame.

That component + pattern is the capability this skill makes discoverable.

When to use synthetic (TerminalScene)

YES, synthesize when:

• The demo is a terminal / CLI / coding session where commands and outputs are predictable
• The user wants a polished tutorial feel (clean typography, floating pills, cursor blink)
• Install walkthroughs, setup demos, API key config, make targets, git clone flows
• You need tight sync with narration — every command must land on a specific beat
• You want the result reproducible (re-render gets identical pixels)
• The user's actual desktop has private apps/windows visible you'd otherwise have to crop

NO, capture a real screen when:

• The demo is a real app UI that can't be faked (Figma, Photoshop, a web app with live state, a browser flow)
• The user explicitly asked for a recording of their actual screen
• The behavior depends on timing you can't script (streaming LLM output, real network latency)
• There's a visual quirk (a cursor effect, a plugin pop-up) that only appears in the live environment

For a browser demo → playwright-recording skill, not this one. For a real desktop → screen_recorder tool or Cap via cap_recorder.

The component — TerminalScene

Located at: remotion-composer/src/components/TerminalScene.tsx Exported from: remotion-composer/src/components/index.ts Wired in dispatch: remotion-composer/src/Explainer.tsx (if (cut.type === "terminal_scene"))

Props:

interface TerminalSceneProps {