screen_recorder

TerminalScene

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.

• 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

• 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

playwright-recording

screen_recorder

cap_recorder

remotion-composer/src/components/TerminalScene.tsx

remotion-composer/src/components/index.ts

remotion-composer/src/Explainer.tsx

if (cut.type === "terminal_scene")

interface TerminalSceneProps {
  title?: string;           // shown in the window title bar
  steps: TerminalStep[];    // the timeline
  prompt?: string;          // "$", ">", etc.
  accentColor?: string;     // pill + prompt glow
  backgroundColor?: string;
}

{ kind: "cmd",   text: string, typeSpeed?: number, holdSeconds?: number }
{ kind: "out",   text: string, holdSeconds?: number }
{ kind: "pause", seconds: number }
{ kind: "pill",  text: string, color?: string, durationSeconds?: number }

• cmd

  — prints the prompt, types the text character-by-character (

  typeSpeed

  is seconds per character, default 0.035), then holds for

  holdSeconds

  (default 0.3)

• out

  — a line of program output, reveals instantly with a short fade-in

• pause

  — dead time. Terminal holds on last visible state. USE THIS TO SYNC WITH NARRATION.

• pill

  — non-blocking floating badge (top-right). Spring-in, hold, spring-out. Does NOT advance the cursor — the next step runs in parallel.

1. Know your narration cues — for each scene, write down the exact video-time each narration segment starts.
2. Start with a pause that reaches the first narration cue before any command types.
3. Time each command to land with its narration line —

   cmd

   should start typing the moment narration says its line, not before.
4. Put pauses between command groups that bridge to the next narration cue.
5. End with a closer hold — a pause long enough that the final state is readable after narration ends.

import math
def trace(steps, scene_start, fps=30):
    t = 0.0
    for s in steps:
        k = s["kind"]
        if k == "cmd":
            tf = math.ceil(len(s["text"]) * s.get("typeSpeed", 0.035) * fps)
            t += tf / fps + s.get("holdSeconds", 0.3)
        elif k == "out":
            t += max(2, math.ceil(0.08 * fps)) / fps + s.get("holdSeconds", 0.15)
        elif k == "pause":
            t += s["seconds"]
        # "pill" is non-blocking — does NOT advance cursor
        print(f"  {t + scene_start:6.2f}s  {k}: {s.get('text', '')[:40]}")
trace(install_steps, 50)

lib/verify_scene_pacing.py

• Intro pause — every terminal scene opens with at least 2s of empty-terminal-with-blinking-cursor before anything types. The viewer needs to register the window.
• Pill timing — a pill should fire at the exact moment its named event completes on screen (e.g.,

  repo cloned

  immediately after the last

  Receiving objects

  line). Pills are your substitute for real-world UI notifications.
• Command hold after typing — keep

  holdSeconds

  ≥ 0.3 on every

  cmd

  so viewers register the completed command before the first output scrolls in.
• Output cadence — space

  holdSeconds

  on output lines between 0.4 and 1.0. Output that flies too fast feels like a bug; output that crawls feels boring.
• Auto-scroll works — the terminal holds the most recent 18 lines. Don't worry about off-screen content.
• Cursor blinks only on the latest command line while typing + a ~0.2s tail after typing completes.

1. Copy

   TerminalScene.tsx

   as a template.
2. Define a

   steps

   interface for the relevant timeline primitives.
3. Render each step by interpolating

   frame

   against cumulative start/end times.
4. Wire it into

   Explainer.tsx

   's

   SceneRenderer

   dispatch with a new

   cut.type

   .
5. Add the type to the

   Cut

   interface in

   Explainer.tsx

   and to

   components/index.ts

   .
6. Add a section to this skill documenting it.
7. Update

   remotion-composer/SCENE_TYPES.md

   with the new cut type.

• .agents/skills/remotion

  — general Remotion authoring (hooks, springs, sequences)

• .agents/skills/playwright-recording

  — real browser-flow capture for web apps

• tools/capture/screen_recorder

  — ffmpeg-based desktop capture

• tools/capture/cap_recorder

  — Cap.so polished desktop capture

• skills/pipelines/screen-demo/asset-director.md

  — chooses between synthetic and real for a screen-demo project