Module 10 of 10
Product video
A video for this module is coming.
The /shipyard:video skill makes a short, polished video of your own app. Its screens are rebuilt as code from your app's real colours and fonts, an AI voice narrates, and every animation lands on a spoken word. One set of scenes renders as light, dark, phone and silent-with-captions cuts. There is no screen recording and no editing software.
What you'll do
You will check that you are happy with the cost, let Shipyard install the video tools, approve a written script, make the voice, build the scenes, check them as still pictures, render the cuts, and put a web copy in your app.
What it takes
Decide before you start:
- Time: 2 to 4 hours of back and forth for a good result.
- Your Claude allowance: a big share of a Pro plan's usage. It is best done after your app is live, not before, and not right before you need Claude for something else.
- Voice cost: a few cents per minute of speech, paid to the voice provider (an OpenAI key by default). Re-making a line costs again. As of October 2026, check before relying on it.
- Rendering is free and runs on your computer. It needs ffmpeg, a free video tool. The setup command tells you how to install it.
- Remotion, the tool that turns code into video, is free for individuals and companies of up to 3 people. Larger companies need a paid licence: see remotion.dev/license.
- The voice is synthetic. Anywhere you show the video, add "Narrated with an AI voice".
Steps
Claude runs these commands for you inside Claude Code. They are shown so you know what is happening; they do not work if you paste them into a normal terminal.
Run
/shipyard:videoin your app folder. Claude asks only what is unclear: a promo (30 to 60 seconds) or a how-to for one feature (15 to 40 seconds), who it is for, and the last line, for example "Try it free".Set up the tools:
node "${CLAUDE_PLUGIN_ROOT}/scripts/video-setup.mjs" <appDir>This copies a fixed, tested video engine into a
video/folder in your app and installs it. That is a few hundred MB, once, and takes a few minutes. It renders a small made-up example so you know everything works. Claude looks at the contact sheet it prints, a picture with one frame per scene.Claude studies your app: which features are really shipped, your real colours and fonts, your own words. It invents one consistent fake scenario to use in every scene, with a made-up person and made-up numbers. No real customer data ever appears.
Script first. Claude writes one line per scene and shows it to you in plain text, with a caption for each line, the word count and the length in seconds. About 110 words make about 55 seconds. Every claim must map to a feature your app really has, with no speed claims unless measured and no hype words. Nothing is voiced until you say yes.
Check the script costs nothing yet:
node "${CLAUDE_PLUGIN_ROOT}/scripts/video-voice.mjs" <appDir> --tag <tag> --dry-runMake the voice and word timings:
node "${CLAUDE_PLUGIN_ROOT}/scripts/video-voice.mjs" <appDir> --tag <tag>The key goes in your keys file, never in the chat. Running it again only re-voices lines you changed.
Claude builds the scenes: one small piece of your app's interface per scene, using your real colours and fonts, with motion timed to spoken words.
Check with stills first. Stills are single frames, and they are quick and cheap. Claude looks at them for cropped frames, text running out of its box, wrong claims, a misspelled product name, light and dark separately, and the phone cut. It fixes things and checks again before any render.
Render the cuts, one at a time:
node "${CLAUDE_PLUGIN_ROOT}/scripts/video-render.mjs" <appDir> <tag>:light node "${CLAUDE_PLUGIN_ROOT}/scripts/video-render.mjs" <appDir> <tag>:dark <tag>:light::vertical <tag>:light::silentEach render is checked for dead air (a frozen stretch over half a second) and for loudness, and gets a contact sheet that Claude looks at.
Publish the web copy:
node "${CLAUDE_PLUGIN_ROOT}/scripts/video-publish.mjs" <appDir> <render-name>This makes an mp4 under 10 MB, a poster picture and captions in
public/video/, and prints a snippet to paste into a page. It also adds video file types to a list insrc/proxy.ts, so signed-out visitors can watch them. Claude tells you about that one-line change, and it must be in your pull request. Captions are off by default and the video only downloads when someone presses play.Watch the final mp4 once, start to end. Check the first and last second, the caption text, and that every claim is true of your app today. Save to GitHub through a branch and pull request, and deploy.
Delete old renders from
video/out/. Each is several MB.
Done when
- You approved the script before any voice was made.
- You watched the final video and every claim is true.
- The web copy sits in
public/video/, is under 10 MB, and plays on your live site with the note "Narrated with an AI voice" next to it. - Anything Claude could not check, for example a cut checked by stills only, was told to you.
If something goes wrong
- ffmpeg is missing. The setup command prints the install line. Install it and run setup again. Setup, voice and publish are safe to run again.
- A render fails. Read the last lines it shows. The usual causes are a typo in a scene file, a scene id that does not match the script, or a missing voice step.
- The render warns about dead air. Lower the scene's length in the script and run the voice step again (unchanged lines are reused and cost nothing extra), or add motion to that moment.
- The web copy is too big. If it cannot get under 10 MB, make the video shorter.
- The video does not play for signed-out visitors. The proxy list change was skipped or not deployed. Check that it is in your pull request and redeploy.