Skip to content
Get Friday PicksSubmit

video-shotcraft: product films from your real screens

A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.

In short: A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing. It is a free skill for people who use Claude Code or Codex and want help with motion graphics.

Checked on · Added

Works with

Agent / toolAccess / costLink
Claude CodePaid Claude plan or APIclaude.com/claude-code
CodexChatGPT plan or APIopenai.com/codex
GitHub repoOpen source · ★ 13.7kVincentwei1021/video-shotcraft
video-shotcraft: product films from your real screens

Image: from the GitHub README, shown with credit.

Image from the Vincentwei1021/video-shotcraft READMEImage from the Vincentwei1021/video-shotcraft README

Images from the project README on GitHub.

Reference videos (2)

Real videos made with this skill, credited to their creators. Hover to preview.

video-shotcraft 2.0: every shot rebuilt, before and after thumbnailLAUNCH1:30

video-shotcraft 2.0: every shot rebuilt, before and after

The author's showreel for the 2.0 rewrite: each shot recipe (openers, transitions, text cards, product reveals) is shown as the old version next to the redone one, with the motion curves and Remotion code the agent now gets.

video-shotcraft@VincentWei93♥ 485
A desktop app promo made with video-shotcraft thumbnailLAUNCH0:36

A desktop app promo made with video-shotcraft

A 36-second film for a desktop tool: dark title cards, real app screens that glide in with camera moves, status panels that flip like terminal text and a phone view at the end, built by the agent from the product's own screens.

video-shotcraft@Suercha007♥ 1

Try it in 60 seconds

npx skills add Vincentwei1021/video-shotcraft
git clone https://github.com/Vincentwei1021/video-shotcraft.git

Install command copied from the project README. Check the README for the latest version.

What it does

A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.

You ask Claude Code or Codex for a promo of your product. The agent captures your real pages, chooses shots from a tuned motion library, plans the storyboard, animates it in Remotion, times it to music with sound…

Short excerpt from the README of Vincentwei1021/video-shotcraft. Read the full README on GitHub.

Inside the repo

What it doesWhat's new❤️ SponsorsInstallUseShot libraryMotion WorkbenchWhat you getShowcaseRequirementsAudio and assetsLicense

A prompt to try

Use video-shotcraft to make a 20-second promo for [product URL]. Capture the real pages, keep our own copy, and show me the storyboard before rendering.

Written by us so you can reuse it. Replace each [bracket] with your details.

Step by step

  1. Open the GitHub repo and browse the shot gallery linked at the top to see the motion styles.
  2. Install: npx skills add Vincentwei1021/video-shotcraft (or ask your agent: "Install this skill for me" with the repo link).
  3. Make sure Node.js, npm and ffmpeg are installed; uv is only needed for beat analysis of background music.
  4. Ask your agent: "Use video-shotcraft to make a promo for my product" and point it at your site or app.
  5. Review the storyboard, then tweak copy, shots or timing in the browser workbench before the final render.

Watch out for

Remotion downloads its own headless Chrome on the first render, and renders can be slow on small machines (the README has notes for headless Linux). The template ships demo screenshots: swap in your own and hide any customer or personal data before you publish. Recipes are inspired by well-known brand launch films; keep your own brand and footage in the result.

Docs, demos & materials

Common questions

What does video-shotcraft do?

A Remotion video skill that captures your real product pages, picks shots from a library of 150+ tuned motion recipes, storyboards the film, cuts it to the beat with sound design and hands back an MP4 plus the source you can keep editing.

Which AI agents can use video-shotcraft?

It works with Claude Code and Codex. The code is on GitHub at Vincentwei1021/video-shotcraft.

Is video-shotcraft free?

Free & open source (Apache-2.0 for the code and docs). Bundled sound effects each keep their own licence (see the repo's audio ATTRIBUTION file). It renders with Remotion, which is free for individuals and small teams; larger companies may need a paid Remotion licence.

How do I install video-shotcraft?

Run the install command from the README: “npx skills add Vincentwei1021/video-shotcraft”. Check the README on GitHub for the latest version, then follow the steps on this page.

Is video-shotcraft safe to install?

We read 731 instruction and code files in the repo and found no red flags. That is not a guarantee, so review anything that runs commands on your machine.

Sources & credit

All credit to the original authors. We rewrite in our own words and link back. Something wrong? Report it.

Related skills and use cases in Motion Graphics

See all Motion Graphics entries →

Related

Motion Prompt: name the motion you want, then hand it to your agent thumbnailSKILL

Motion Prompt: name the motion you want, then hand it to your agent

A clickable library of 192 named effects (motion-graphics moves, camera moves and transitions, UI parts, landing-page effects, photo looks), each with a moving sample and an example request. Its skill opens the gallery, lets you tick the ones you like and sends their specs and reference code straight to your agent.

Claude Code logoCodex logoClaude Code +1★ 849
pixelfx: 232 pixel-art effects in code, and a skill to make more thumbnailSKILL

pixelfx: 232 pixel-art effects in code, and a skill to make more

A free library of 232 pixel-art effects written as small code files (fire, explosions, magic, weather, UI pops, pickups, transitions) that you can drop into a browser game or export as sprite sheets, plus a Claude Code skill that drafts, renders, looks at and refines new effects until they hold up.

Claude Code logoClaude Code★ 147
HyperFrames: write HTML, get a video thumbnailSKILL0:56

HyperFrames: write HTML, get a video

Open-source renderer that turns HTML/CSS/JS scenes into frame-exact MP4s; built so coding agents can drive it.

Claude Code logoCodex logoClaude Code +1★ 63.8k
/brag: turn a finished project into a launch video thumbnailSKILL0:34

/brag: turn a finished project into a launch video

Type /brag in a project; it reads the code and renders a ~20s launch film with music, captions and share copy.

Claude Code logoCodex logoClaude Code +1★ 16k
Anatomy: interactive isometric illustrations thumbnailSKILL0:28

Anatomy: interactive isometric illustrations

Draws detailed, interactive isometric cutaways of real objects as code; a port also runs in ChatGPT/Codex.

Claude Code logoCodex logoClaude Code +1★ 10.6k
img2threejs: one image into an editable Three.js 3D model thumbnailSKILL

img2threejs: one image into an editable Three.js 3D model

Show your agent one picture of an object or character and it rebuilds it as plain Three.js code, pass by pass, checking its own renders against the picture, so you get a 3D model you can rotate, animate and keep editing instead of a mesh file.

Claude Code logoCodex logoClaude Code +1★ 18.8k

Free newsletter

Friday Picks

New AI tools you can use right away, in plain words. Every Friday.

Free. No spam. Unsubscribe anytime.