Make a product launch video with an AI agent

This is the hands-on version of how agents make launch videos. It follows Lookbk’s launch-film skills step by step, from an empty folder to an MP4 you can post. The commands are the ones your agent runs; you mostly answer questions and look at stills.

Before you start

• Node.js 22 or newer, and FFmpeg with ffprobe on your PATH
• Chrome, Chromium or Edge, for capturing your screens
• A way into your app with made-up data: a demo or staging account, a session cookie or a local dev server
• A music track you have the right to use, if you want one. None ships with the skills

Pick a skill

All three are 16:9 only. For a vertical teaser before launch day, add Countdown Teaser, which renders 9:16. To try the workflow for free first, Kinetic Title Drop renders a six-second title with the same tools.

Brief your agent

Install the skill (see Install a skill in any agent), start a new session, and ask in plain words. Give the three things the skill asks for up front:

Make a 45-second launch film with the Launch Scene Kit for our public beta.
Read https://relay.example first. Show the shared inbox, drafted replies and the
Slack integration. Use our brand blue on the light stage, and end on relay.example/beta.

The agent copies the skill’s template into a new folder and reads your site. The read prints your page’s headings, calls to action, colors and fonts, and saves them to site.json, which the copy is drafted from. It should not invent features or numbers: every callout says something your product really shows.

Capture your real screens

The agent writes shots.json: one entry per screen, with the URL, what to hide (cookie banners, chat bubbles), where the camera should push in and where the cursor clicks. Then Chrome captures each one at twice the pixel density, so push-ins stay sharp.

{
  "viewport": [1440, 900],
  "hide": ["#cookie-banner"],
  "shots": [
    { "name": "inbox", "url": "https://app.relay.example/inbox", "focus": ".thread-list" },
    { "name": "reply", "url": "https://app.relay.example/inbox/42", "focus": ".composer", "click": "button.draft" }
  ]
}

Approve the storyboard

Next the agent writes brief.json, the storyboard: every scene with its words, its screen and its length in bars. A checker reads the whole brief and lists every problem at once, such as a line too long for its space or two colors too close to read. Then it takes one still per scene at the moment the scene is fully built.

Ask for changes in plain words (“shorter problem line”, “swap the second and third moments”). The agent edits the brief and runs the checker again. You never edit the template’s code.

Fit the music

Every scene is measured in bars at the film’s tempo, so every cut falls on a bar line. Give the agent your track and it fits the film to it: the music script detects the beats, sets the tempo and the start, and the next render mixes the track in with a fade at the end.

node <skill>/scripts/sync-music.mjs brief.json track.mp3
node <skill>/scripts/apply-brief.mjs . brief.json

Render and cut the social versions

The render runs on your machine with HyperFrames; there are no render credits. Use a draft render for a quick check, then the final one:

npx --yes hyperframes@0.8.192 render --quality delivery -o renders/launch-film.mp4

• Add --resolution 4k for 3840×2160. It takes several times longer, so render 1080p first.
• With Launch Scene Kit, split-scenes.mjs then cuts one MP4 per scene on its bar lines, for posting a single scene.
• Keep the brief. To change a line after launch, edit it, apply it and render again.

New

video

Launch Scene KitHyperFramesFFmpegClaude CodeCodexCursor+3 more agents

New

video

Launch Film: PorcelainHyperFramesFFmpegClaude CodeCodexCursor+3 more agents

New

video

Launch Film: After HoursHyperFramesFFmpegClaude CodeCodexCursor+3 more agents