What it does

Tell Claude Code or Codex "make a promo for my product". The agent captures your real pages, picks shots from a library of tuned motion recipes, storyboards the film, animates it with Remotion, cuts it to the beat, adds sound design, checks every frame and hands you a finished MP4 you can keep editing.

It is not a video generator. Every frame is drawn by code from your own screenshots and copy, so the result is sharp, on-brand and fully editable.

• Real product, real pages. Your actual UI, captured and moved with 2.5D camera work, not a generated look-alike.
• 124 shot recipe cards, 150 tuned shots. Each card says when to use the shot, its timing, easing and known

pitfalls, and ships a Remotion implementation you can read.

• A finished film, not a clip. Storyboard, captions, beat-synced cuts, film-grade SFX and a final QA pass,

then a browser workbench and a JianYing (CapCut CN) export to keep editing.

How it works

flowchart LR
  A[Your product<br>or web page] --> B[Capture<br>real pages]
  B --> C[Storyboard with<br>shot recipe cards]
  C --> D[Animate in<br>Remotion]
  D --> E[Beat sync +<br>sound design]
  E --> F[Render +<br>frame QA]
  F --> G[MP4 · Motion Workbench<br>· JianYing draft]

What's new

[!IMPORTANT] ### 🎬 2026-10 · Library overhaul: every shot re-crafted, the best version kept All 216 demo shots went through two redesign passes: a texture polish, and a full launch-film-grade redesign built on a new visual system (demos/_fixtures/Look.tsx: 8 lit stage looks, a type scale, text reveals, light and grain). Every shot was then reviewed side by side (original / polish / redesign) and the strongest version kept: 92 redesigns, 50 polished, 8 originals. 66 weaker shots were retired, so the library is now 124 cards / 150 shots, all freshly re-rendered in the Gallery. The demos now star video-shotcraft itself: its Frame Chisel mark, wordmark and promo copy. The mark and name come from one shared file, demos/_fixtures/Brand.tsx; when the skill builds your film, the agent swaps in your logo and rewrites the copy for your product.

• 2026-09 · Motion Workbench. Keep editing the delivered film in a CapCut-style browser editor.
• 2026-09 · One-click film themes. Switch the template between nine looks (Ink Press, Modern Light, Midnight,

Sage, Coral, Iris, Deep Ocean, Obsidian Violet, Vintage Kraft) and keep your edits. Theme guide.

• 2026-08 · video-talkcraft, the narration-video

sibling: script + voiceover in, every motion beat locked to the voice (78 narration previews).

• 2026-08 · JianYing (CapCut CN) export. The final film becomes an editable JianYing draft: per-shot clips,

native caption tracks, separate SFX/BGM tracks. Verified on JianYing Pro 11.2 for macOS (guide).

• 2026-08 · 48 new shot recipe cards, distilled through eight rounds of frame-by-frame review against

reference footage (sourcing notes).

Install

Built and tuned for Claude Code and Codex. The simplest way is to hand your agent the link:

Install this skill for me: https://github.com/Vincentwei1021/video-shotcraft

Or with the skills CLI:

npx skills add Vincentwei1021/video-shotcraft

Or by hand:

git clone https://github.com/Vincentwei1021/video-shotcraft.git
cd video-shotcraft
ln -s "$(pwd)" ~/.claude/skills/video-shotcraft   # Claude Code
ln -s "$(pwd)" ~/.codex/skills/video-shotcraft    # Codex

In mainland China, clone from the AtomGit mirror if GitHub is slow: git clone https://atomgit.com/VincentWei/video-shotcraft.git.

Use

Just describe the film. No command needed.

What you get

Also in the box: reusable Remotion components (2.5D page camera, captions, flash cuts, digit rolls), 149 SFX and 5 BGM tracks, page-capture scripts, and the production method itself (capture, visual direction, storyboarding, sound design, beat sync, final QA) in references/.

Shot library

124 recipe cards in 10 categories, 150 shots in total. Search, filter and copy card names in the Gallery.

Opening & Brand · 11 shots text-as-mask: the product shows through the title	Camera · 13 shots exploded-view: the page tilts and comes apart
Transitions · 19 shots card-flock-tumble: a flock of cards becomes the headline	Typography · 25 shots flying-words: a word tunnel resolves into the motto
UI Entrance · 22 shots card-stack: a fan of cards deals into place	Interaction · 13 shots palette-theme-ripple: a new theme ripples across the UI
Data · 9 shots axis-rescale-shock: the spike breaks the axis	Light & Emphasis · 23 shots spotlight-sweep: a stage light finds the title
Rhythm · 8 shots paparazzi-flash: three flashes, three crops, one number	Outro · 7 shots input-morph-assemble: the chat box builds the logo

Each card lives in references/shots//.md, with its Remotion implementation in demos/// (see demos/README.md for how to wire one into your project).

Video template: Ink Press

A validated, complete promo: 36.2 seconds, 1920×1080, 30 fps, 10 shots in a paper, ink and amber style, with 2.5D real-page camera moves, title cards, transitions and a fully pinned cinematic SFX pass.

https://github.com/user-attachments/assets/4cf5af51-98f3-4af2-8ab2-7267f470513d

▶️ Watch in HD on YouTube

Say Use video-shotcraft to make a promo for my product with the Ink Press template. The agent swaps in your screenshots, copy and branding. It is the fastest, most reliable path to a finished film. More templates are on the way.

Motion Workbench

After delivery the skill opens a CapCut-style editor in your browser (node workbench/scripts/open.mjs ). The film is split into shot, transition, caption and SFX tracks exactly as authored. Select any shot to edit its copy, font sizes and colours, move, trim or speed-ramp clips, drag in any of the 150 library shots, then export with Remotion. Preview and render are frame-identical.

!Motion Workbench

Workbench guide, every panel with screenshots (Chinese) · Integration contract

Showcase

The 38-second Gallery intro below was itself made with this skill: storyboard, shots and sound design were all done by an agent following the library's method.

https://github.com/user-attachments/assets/cba2df8a-4b2e-4247-bace-d0b1dea9c2bd

▶️ Watch in HD on YouTube

Share your film. Made something with video-shotcraft? Submit it with the Showcase issue form. After review it appears on the Showcase page.

Requirements

Remotion downloads its own headless Chrome on first render. Tested on macOS; Linux works with the notes below.

video-shotcraft/
├── SKILL.md                 # Agent entry point and core production rules
├── references/
│   ├── pipeline.md          # End-to-end production workflow
│   ├── shots/               # 124 shot recipe cards in 10 functional categories
│   ├── sequences/           # Reusable full-video structures and sequence patterns
│   ├── aesthetic-rules.md   # Visual QA criteria
│   ├── music-beat-sync.md   # BGM analysis and beat-sync methodology
│   ├── sound-design.md      # Sound-design guidance and examples
│   ├── jianying-export.md   # JianYing (CapCut CN) project-export guide
│   ├── publish-upload-post.md # Optional social publishing (Upload-Post API)
│   └── workbench.md         # Motion workbench: manifest contract + editability rules
├── demos/                   # Remotion reference implementations (same categories)
├── gallery/                 # Static motion-preview Gallery
├── template/                # Runnable complete video template
├── jianying-export/         # JianYing draft installers (mac tested / win untested)
├── publish/                 # Optional social publisher (stdlib-only Python) + offline tests
├── workbench/               # Post-delivery motion workbench (Vite + Remotion Player)
└── assets/
    ├── lib/                 # Reusable Remotion components
    ├── scripts/             # Page-asset capture scripts
    └── audio/               # Audio assets
        ├── bgm/             # 5 BGM options
        └── sfx/<category>/  # 149 SFX across 16 scene categories

Audio and assets

SFX are organized into 16 scene and material categories (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter): pick the category first, then the timbre. See sound-design.md for the index and per-file usage, and ATTRIBUTION.md for sources and licenses.

Product screenshots bundled with the template are demonstration assets. Replace them with screenshots of your product before publishing, and check whether any product, customer or personal data needs to be anonymized.

License

• Code and docs: Apache-2.0.
• Audio under assets/audio/: each file under its own license, see ATTRIBUTION.md.
• Remotion has its own

license: free for individuals and small teams, companies may need a paid license.

Acknowledgements

Many recipes were distilled by studying the motion language of outstanding official product films, including promos from ClickUp, Perplexity, Slack, Notion, Figma, Framer, Bear, Raycast, Pitch, Miro, Superhuman and Loom. The cards document techniques (timing, easing, choreography) re-implemented from scratch; no footage, artwork or brand assets from these films are included. All trademarks belong to their owners, and none of these companies are affiliated with or endorse this project.

Thanks also to Remotion, which powers every demo and template here; Mixkit, the source of the bundled SFX and music under its free license; the game-feel and animation communities whose published principles inform several cards; and Claude Code, with which this library was built, iterated and QA'd using the same workflow the skill teaches.

Follow me

Star history