Point an AI director at your live app. Get a cinematic 60-second launch video.
Real product footage — performed, shot, and edited automatically. No mockups, no timeline, no manual cuts.

_{Generated by supercut from a live web app — zero manual editing. The cursor, the camera, the cuts: all automatic.}

---

You built something great. Now you need a launch video — and all you've got is a screen recording, iMovie, and a deadline.

supercut points an AI director at your running app. It reads your source, crawls the live UI, decides the 2–4 moments that actually sell the product, drives a real browser to perform them on camera, then renders the whole thing with the Screen-Studio look — spring zoom-to-cursor, motion blur, a padded background, and a clean 1080p60 export.

Not a screen recording. Not a fake UI mockup. Your real product, shot like a launch film — automatically.

✨ What makes it different

• Real footage only. It drives your actual app in a real browser. Nothing is faked or re-created.
• It understands the product. It reads your routes/source and crawls the DOM, so it films the money moments — type a query → frame the result — instead of parking on the landing page.
• It frames the payoff. The camera holds on the result an action produces (the graph, the dashboard, the detail panel), not the button you clicked.
• Works on any app. Same pipeline for a light editorial dashboard or a dark single-page tool — copy and colors adapt per app.
• No API key required to run it. record + render work fully offline; only the AI director (generate) calls an LLM.
• An open contract. The recorder writes a documented event log; any recorder can feed the renderer.

🎬 How it works

 your app URL ──▶ ① analyze   read the source + crawl the app → pick the money moments (LLM)
                  ② script    write the filming recipe (LLM, schema-validated, no hallucinated selectors)
                  ③ record    a deterministic browser performs it, captured frame-by-frame
                  ④ qc        deterministic + optional vision checks, bounded re-takes
                  ⑤ render    cinematic compositing ──▶ final.mp4 (≤60s, 1080p60)

Each stage hands off a plain-JSON artifact, so you can stop at any point, hand-edit, and resume.

🚀 Quick start

git clone https://github.com/Co-Messi/supercut
cd supercut
npm install
npm run build

# point it at your running app — that's it
node dist/cli/index.js generate --url http://127.0.0.1:3000 --yes

generate needs an LLM key (see provider setup). No key? The non-AI path works standalone:

node dist/cli/index.js record --recipe examples/demo.recipe.json --out out/take
node dist/cli/index.js render --take out/take --out out/final.mp4
node dist/cli/index.js doctor   # check Chromium + ffmpeg are installed

Browser + video need Chromium and ffmpeg: npx playwright install chromium and an ffmpeg on your PATH.

🤖 Or: let your coding agent set it up

Already living in Claude Code, Codex, opencode, Cursor, or Cline? Don't run the steps by hand — paste the block below in as your task, fill in the two <...> placeholders, and let the agent clone, build, install Chromium/ffmpeg, and film your app:

Set up and run supercut (https://github.com/Co-Messi/supercut) to make a launch
video of my app. Steps:

1. git clone https://github.com/Co-Messi/supercut && cd supercut
2. npm install && npm run build
3. npx playwright install chromium
4. Ensure ffmpeg is on PATH (install it if missing), then run:
   node dist/cli/index.js doctor
5. Ask me which LLM provider to use, then create a .env:
   - DeepSeek:    SUPERCUT_PROVIDER=deepseek    + DEEPSEEK_API_KEY=...
   - OpenRouter:  SUPERCUT_PROVIDER=openrouter  + OPENROUTER_API_KEY=...
6. Film it (my app is running locally — fill these in):
   node dist/cli/index.js generate --url <MY_APP_URL> --repo <MY_APP_SOURCE_DIR> --yes
7. When it finishes, open out/final.mp4 and show me the result.

No API key handy? Skip the .env and use the no-LLM path instead:
   node dist/cli/index.js record --recipe examples/demo.recipe.json --out out/take
   node dist/cli/index.js render --take out/take --out out/final.mp4

Same block works in any agent — they all take a pasted task. --repo is optional but makes the director read your routes so it films real panels, not just the landing page.

Help the director understand a deeper, multi-page app by pointing it at the source:

node dist/cli/index.js generate --url http://127.0.0.1:3000 --repo ./ --yes

Private/local apps & untrusted targets

Filming your own local dev app is the primary use case, so generate allows localhost / RFC1918 / link-local by default — no flag needed. If you point it at an untrusted or public URL, add --block-private-network to engage the SSRF guard (rejects localhost, RFC1918, link-local, and cloud-metadata addresses, and validates each redirect hop):

node dist/cli/index.js generate --url https://untrusted.example --block-private-network --yes

(--allow-private-network is a deprecated no-op kept for back-compat. Known limit: the guard does not defend against DNS-rebinding / resolve-time TOCTOU.)

⚠️ supercut drives and may MUTATE the target app — it performs real clicks and typing on whatever you point it at. Destructive controls (Delete, Pay, Checkout, …) are excluded from filming by default; pass --allow-destructive to include them. Never run it against production data or URLs/recipes you do not trust.

🔌 LLM provider setup

Copy .env.example to .env (or pass --env-file <file>):

cp .env.example .env

DeepSeek is text-only here, so supercut disables screenshots and vision QC for it by default:

SUPERCUT_PROVIDER=deepseek
DEEPSEEK_API_KEY=...
SUPERCUT_MODEL=deepseek-v4-pro

OpenRouter / custom OpenAI-compatible providers can use vision-capable models:

SUPERCUT_PROVIDER=openrouter
OPENROUTER_API_KEY=...
SUPERCUT_MODEL=anthropic/claude-sonnet-4.6
SUPERCUT_VISION=true

For SUPERCUT_PROVIDER=custom, set both SUPERCUT_LLM_BASE_URL and SUPERCUT_MODEL. If multiple provider keys are present, set SUPERCUT_PROVIDER explicitly — ambiguous config fails loudly rather than guessing.

🔒 Privacy

generate may send crawled DOM text, element labels/selectors, optional screenshots, and optional repo notes (--repo) to your configured LLM provider. It also writes frames, recipes, and director reports to out/. Review those before sharing — and use record + render for a fully no-LLM workflow.

📜 Event-log contract

The public boundary is plain JSON, so any recorder can feed the renderer:

recipe.json ──▶ record ──▶ take directory
                         ├─ events.json        (the event-log contract)
                         ├─ frames-index.json
                         └─ frames/*.png

take directory ──▶ render ──▶ final.mp4

Schemas reject unsupported URL schemes, malformed events, non-monotonic timelines, oversized logs, and impossible camera boxes.

Project principles

• Real product footage beats mockups.
• The event log is a public contract.
• The non-AI record / render paths stay useful without an API key.
• Defaults fail loudly on unsafe or ambiguous config.

Contributing

npm run typecheck
npm run test:fast
npm run test:e2e          # needs Chromium + ffmpeg
npm audit --audit-level=moderate

Keep PRs focused and add tests for behavior changes.

License

MIT