video-sync — Annotated Shot Video Composer

Composites your source video with shot-analysis data into a watchable video where the current shot's metadata panel switches in sync with every cut.

Image & VideoIntermediate★ 885⑂ 111AI score 8/10Last updated: Oct 9, 2026

What it does

Merges shots.json (output of the companion video-shots skill) with the source video: picture on one side, current-shot info on the other (shot number, in/out, duration, shot size, category, camera movement, description, dialogue).
When the cut changes, the panel changes; the shot list auto-scrolls and highlights the active row.
Layout is chosen purely by aspect ratio: landscape/square → picture on top, info below (vstack); portrait → picture left, info right (hstack). The picture is always scaled, never cropped or stretched.
Only three screenshots are taken (base plate + two long shot-list images, one dimmed, one lit); scrolling and highlighting come from ffmpeg time-window cropping driven by sendcmd. A 53-shot film renders panels in ~12s.
Layout lives entirely in scripts/panel.css; preview panels/panel.html in a browser before exporting.

Who it's for

Editors, film-school instructors, and cinematography teachers publishing shot breakdowns as video
Content creators making reference-analysis or commentary videos
Anyone who already produced shot data with video-shots and wants to visualize it

Examples

Check geometry first: node .../video-sync.mjs plan shots.json --video ref.mp4 and confirm layout, picture area, output size
One-shot export: node .../video-sync.mjs export shots.json --video ref.mp4 -o out.mp4 --frames frames
Small source footage: add --scale 2 so a 640×360 clip gets a readable 1280×576 panel
QA step: for t in 5 30 60; do ffmpeg -ss $t -i out.mp4 -frames:v 1 /tmp/check-$t.jpg; done and verify the shot number matches the frame

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/eternityspring/reelbench-skills/HEAD/skills/video-sync/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)

Download the ZIP with the button below.
In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.

↓ Download ZIP

Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the skills/video-sync folder from the GitHub repo eternityspring/reelbench-skills into my ~/.claude/skills/video-sync/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/eternityspring/reelbench-skills.git /tmp/reelbench-skills && mkdir -p ~/.claude/skills && cp -r /tmp/reelbench-skills/skills/video-sync ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

Install prerequisites: Node.js 18+, ffmpeg and ffprobe, and Chrome (or Chromium/Edge). No npm packages are required.
Clone the repo: git clone https://github.com/eternityspring/reelbench-skills.git
Copy the skill into place: mkdir -p ~/.claude/skills && cp -r reelbench-skills/skills/video-sync ~/.claude/skills/
Verify the install with the bundled self-test: node ~/.claude/skills/video-sync/scripts/selftest.mjs (122 assertions, no ffmpeg or browser needed).
Restart Claude Code, then ask something like "export an annotated shot video from this shots.json and my source clip".
If Chrome isn't auto-detected, pass its path explicitly with --chrome /path/to/chrome.

View source on GitHub ↗License: Apache-2.0