REC 00:00:00;00
screencast-mcp Workflows Connect GitHub ↗

SCREENCAST-MCP / WORKFLOWS / REC 06

Zoom toward every click

A full-window recording makes viewers hunt for the cursor. Record with the input event log on, and zoom glides the camera in as each click happens, pans between clicks close together, rings the click, and zooms back out when things go quiet. The log never records what you type.

00:00THE PROMPT

Record the Demo Settings window while I click Save, then make a version that zooms in on my clicks and highlights them.

00:05THE CALLS IT MAKES

start_recording (events) → stop_recording → read_events → zoom (follow clicks, highlightClicks) → export_gif. Paths are shortened; every value is from a real run.

  1. start_recording { "target": "window:Demo Settings", "fps": 30, "events": true }Starts a small input hook alongside ffmpeg. Keys are masked by default: the log says a key went down, never which.{ "sessionId": "rec-…", "eventsPath": "rec-….events.jsonl", "keys": "masked" }
  2. stop_recording { "sessionId": "rec-…" }The log is converted to the video's clock and pixels as the recording stops.{ "durationSec": 6.9, "eventsPath": "rec-….events.jsonl", "events": { "moves": 1, "clicks": 1 } }
  3. read_events { "sessionId": "rec-…", "types": ["down"] }Each click with its video time and position. Handy on its own: sample_frames at those times shows what each click did.{ "matched": 1, "events": [{ "t": 3.183, "type": "down", "x": 91, "y": 204, "inFrame": true, "button": "left" }] }
  4. zoom { "input": "rec-….mp4", "dryRun": true }With an event log next to the recording, follow defaults to clicks. The plan is editable: pass it back as keyframes.{ "follow": "clicks", "keyframes": [{ "t": 3.18, "x": 0, "y": 134, "width": 241, "height": 141 }, { "t": 5.18, "full": true }] }
  5. zoom { "input": "rec-….mp4", "highlightClicks": true }The camera arrives on the click as it happens (the ease starts 0.6 s earlier), holds 2 s, and zooms out. Rings are drawn before the zoom, so they move with it.{ "outputPath": "zoom-….mp4", "follow": "clicks", "ringedClicks": 1 }
  6. export_gif { "input": "zoom-….mp4", "width": 480, "fps": 15 }{ "sizeBytes": 317734, "withinBudget": true }
00:30THE OUTPUT
The raw recording: the whole settings window, the cursor moves to Save and clicks, and a green Saved banner appears.
before · the raw recording, 480 × 281
The zoomed version: the camera glides in on the Save button as the cursor clicks it, a red ring expands from the click, then the view eases back out to the whole window with the Saved banner.
after · zoom with highlightClicks, the real output of the calls above

No event log? zoom falls back to follow: "changes" and zooms toward where the screen changed. Keep the event log next to the original recording: its times and pixels match that file, not a trimmed or rescaled copy.