video-shotcraft: Cinematic Product Video Builder
Turns a frontend project or webpage into a cinematic product promo video using Remotion, real page screenshots, 2.5D camera moves, beat-synced cuts and sound design.
Image & VideoAdvanced★ 4,305⑂ 381AI score 8/10Last updated: Aug 9, 2026
What it does
A self-contained production library that turns your web/desktop product into a cinematic promo video rendered with Remotion.
- 152 shot recipe cards, each with demo source code and an animated sample in an online gallery — treat them as a reusable motion vocabulary.
- A validated "Ink Press" template: a fully renderable Remotion project where you swap screenshots, copy and branding.
- Three explicit modes: use the template as-is, let the agent create freely end-to-end, or co-create with checkpoints (brief → visual direction → shot mapping → storyboard).
- Real-page capture pipeline: spins up your dev server, screenshots full pages at 2x, cuts out elements, and emits a
layout.jsoncoordinate table to drive 2.5D camera work. - Sound design & beat sync: 149 commercially licensed SFX plus BGM, librosa-based BPM/phase and kick/snare/hihat detection, timelines written in
beatF(n), and post-render verification within 3 frames. Always delivers a with-BGM and SFX-only version. - Built-in QA: per-shot
remotion stillchecks, ffmpeg frame extraction reviews, and a clean-context subagent doing an independent final review before delivery.
Who it's for
- Developers and indie makers who want a demo/launch video straight from their real landing page.
- Product teams that need the video to inherit the product's own design tokens (type scale, colors, spacing) instead of a generic "promo skin".
- Frontend engineers already comfortable with Remotion and code-driven video.
- Motion designers who just need one polished shot (deck fly-in, orbiting close-up, etc.).
Examples
- Template route: "Use the Ink Press template to make a promo for my SaaS" → template mode locks in; swap screenshots, copy and logo, then
npx remotion render src/index.ts AiflPromo out/promo.mp4. - Autonomous route: "Read this repo and produce a 30s promo, don't ask me anything" → the agent runs brief → styleframe → shot mapping → storyboard → render without pausing.
- Single shot: "Give me an 8s clip where my dashboard cards fly in using
deck-deal-flyin" → it reads the full card plus the exact demo TSX so tuned easing and timing are preserved. - Beat-synced edit: supply a track and it analyzes real BPM/phase and drum hits first, pins transitions to beats, then re-extracts audio from the render to verify cut accuracy.
· · · Install guide · · ·
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.
Install in Claude Code
Let Claude do it — paste this into Claude Code
Install the skill I found on Claude Skill Mart. Copy the SKILL.m folder from the GitHub repo Vincentwei1021/video-shotcraft into my ~/.claude/skills/video-shotcraft/. When it's done, tell me in one line what this skill can do.
Install with a command instead
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft⚠ This is a third-party skill. Check the source repository before installing.
- Prerequisites: install Node.js 18+ with npm, Python 3 (for the local gallery and beat analysis), and ffmpeg. Chrome/Chromium helps with headless page capture.
- Create the skills folder: run
mkdir -p ~/.claude/skills. - Clone the repo:
git clone https://github.com/Vincentwei1021/video-shotcraft.git ~/.claude/skills/video-shotcraft - Verify:
ls ~/.claude/skills/video-shotcraftshould showSKILL.md,references/,template/,demos/,assets/, andgallery/. - Optional template setup:
cd ~/.claude/skills/video-shotcraft/template && npm install, thennpx remotion render src/index.ts AiflPromo out/promo.mp4to confirm rendering works. - Browse the gallery: open https://vincentwei1021.github.io/video-shotcraft/library.html and copy the names of shot cards you like.
- Run Claude Code in your project folder and ask, e.g. "use video-shotcraft to make a promo for this site". The skill does a read-only product inspection first, then proposes the three modes.
- Safety note: because it captures your real pages, replace any customer, personal, internal or live data with dummy content before capture.
View source on GitHub ↗License: Apache-2.0