Make a product launch video from your codebase with HyperFrames or Remotion
Опубликовано 2026-10-12
You shipped something and now need a video for the launch post, the landing page or the release notes. You may not have an editor or a motion designer, but you do have the codebase. Coding agents can now write video as code: a HyperFrames composition is an HTML page, a Remotion composition is a set of React components, and both are turned into MP4 files by headless Chrome (a Chrome browser running without a window) and FFmpeg (HyperFrames README). Because the agent can read your repo, it can use your real copy, colors and screens instead of stock footage.
It is one of the busiest corners of the skill ecosystem. On the skills.sh all-time leaderboard, checked on 12 October 2026, six HyperFrames skills sit in the top 25 and Remotion's best-practices skill is in the top 100. Those six are helper skills that HyperFrames installs together as one core set, so the ranking shows that the bundle is popular, not that there are six separate tools to choose from.
This guide covers four jobs: a 15 to 90 second launch video built from your product's own screens, a short changelog video for a release or pull request, narration and captions that work with the sound off, and encoding and publishing the final file.
Where to start
| Your situation | Start with | Watch out for |
|---|---|---|
| Solo founder who wants a 20-second clip today | Brag (HyperFrames with --full) | Built for 15 to 25 seconds; on Claude Opus 5.5 it skips HyperFrames unless you add --full |
| Marketer without access to the repo | HyperFrames' product launch workflow, from your live site's URL | Node.js 22+ and FFmpeg on your machine |
| Company with more than 3 employees and no license budget | HyperFrames | HeyGen voice, catalog music and cloud rendering need a HeyGen account |
| React app, and the film should reuse real components | Product Film on Remotion | Remotion's Company License for for-profit companies above 3 employees |
| Devrel shipping a release | HyperFrames' PR-to-video workflow | Needs the gh CLI |
| You need a narrator | HyperFrames' voice (HeyGen sign-in or local Kokoro), or ElevenLabs Skills | ElevenLabs' free plan lists no commercial license |
| Publishing to YouTube | yutu | Google Cloud setup; the sign-in expires after 7 days |
| Posting to X or LinkedIn | Postiz CLI | A Postiz account, paid cloud or self-hosted |
Before you start
A few terms first. A skill is a folder of instructions an agent loads for a specific job, and a plugin bundles several skills and commands. A CLI is a command-line tool. An API key is a private code that lets a tool use a paid service on your account, and OAuth means signing in through the browser instead of pasting a key.
What you need on the machine that runs the agent:
- A coding agent that supports skills. The commands below are for Claude Code; for Codex, use
-a codexinstead of-a claude-codein anynpx skills addcommand. HyperFrames also lists Cursor and Gemini CLI. - A local copy of your repo, and a demo account seeded with fake data so no real customer appears on screen.
- Node.js 22 or later, the JavaScript runtime that HyperFrames, Remotion and
npxrun on. Remotion's project setup also expects Git. - FFmpeg, the command-line video tool. HyperFrames needs it before its first preview or render:
brew install ffmpegon a Mac with Homebrew, or your package manager on Linux. - Python, only for WhisperX (Step 5) and Product Film, whose helper scripts run with uv, a Python package runner.
- The
ghCLI, GitHub's command-line tool, signed in, only for the PR-to-video workflow. - Accounts only for the services you choose: an ElevenLabs API key, a HeyGen account, a Google Cloud project for YouTube uploads, a Postiz account for social posts.
If you don't code, ask a developer to do this setup once. After that you work through prompts and the browser preview.
Step 1: Pick the engine and read its license
HyperFrames is HeyGen's open-source framework. You write scenes in HTML and CSS, animate them with libraries such as GSAP, Lottie or Three.js, and render a deterministic MP4: the same input gives the same frames. It is Apache 2.0 licensed, and its README says there are no per-render fees or commercial-use thresholds. Its skills work with Claude Code, Codex, Cursor, Gemini CLI and other agents that support skills. Its workflows include product launch videos (from a URL, brief or script, up to about 3 minutes, best at 30 to 90 seconds), PR-to-video, embedded captions for talking-head footage and short motion graphics.
Rendering on your own machine or in Docker is free. HeyGen-hosted cloud rendering is optional and paid per HeyGen credit, with 4K billed at 1.5 times the rate (cloud reference). Optional AWS Lambda rendering deploys a render stack to your own AWS account, so AWS bills you for it.
claude plugin install hyperframes@claude-plugins-official
For Codex:
codex plugin marketplace add openai/plugins && codex plugin add hyperframes@openai-curated
Installed as a Claude Code plugin, the entry point is /hyperframes:hyperframes; with the standalone skills it is /hyperframes. Either way this router confirms the brief with you and picks the workflow.
Remotion writes videos as React components and needs a bundler (the build tool that packages a React project); it can also render in the cloud on AWS Lambda. Its license is source-available (the Remotion License). It is free for individuals, for-profit organizations with up to 3 employees, non-profits, and for evaluating Remotion before you use it commercially. Any other company needs a Company License (Remotion license). Remotion's license FAQ adds that freelancers, studios or agencies who help run Remotion on the same project count toward your headcount, while an agency that hands over only finished video files counts only its own staff.
The terms are about to move. LICENSE.md says the license will change slightly in Remotion 5.0, and the draft change counts contractors toward team size (PR #3750, not yet merged on 12 October 2026). Read the license again when you upgrade.
On 12 October 2026 the pricing page listed $25 per seat a month for people making videos locally (Creators), $0.01 per render with a $100 monthly minimum for apps and automated rendering (Automators), and Enterprise from $500 a month.
The Remotion-based skills below are MIT-licensed (Product Launch Video, Product Film) or published by the Remotion team (Remotion Best Practices). They install and drive Remotion, so Remotion's license terms apply whenever you use them.
Install the skill first, then ask the agent for a video. If there is no Remotion project yet, the skill scaffolds one with npx create-video@latest and opens Remotion Studio for a live preview. It renders only when you clearly ask for an export.
npx skills add remotion-dev/skills --skill remotion-best-practices -a claude-code -y
Add the CLI by hand only to an existing project that lacks it, and keep every remotion and @remotion/* package on the same exact version, as its README asks.
npm install @remotion/cli --save-exact
Step 2: Write the brief and the script
What to hand the agent: run it at the root of your repo and tell it the audience, length, channel, aspect ratio and the one thing viewers should remember. Give it a short list of claims you can stand behind (your README and landing page are good sources) and a list of what must never appear: admin pages, real customer names, internal URLs. Point it at the seeded demo account, not production.
Brag reads the project code, plans a concept and storyboard, and hands a brief to HyperFrames, so install HyperFrames first. It offers landscape, vertical and square formats, seven tone presets, music and sound effects by default, and narration only with --voice (Kokoro through HyperFrames). It renders brag.mp4, picks a poster frame (the still shown before the video plays) and writes share copy.
On Claude Opus 5.5, Brag switches to its bundled brag-slim variant, in which the agent builds the whole video itself without HyperFrames, unless you add --full or --voice. Add --full to get the storyboard and HyperFrames handoff described here.
npx skills add latent-spaces/brag --skill brag -a claude-code -y
Example prompt for Brag:
/brag --full --tone polished --format vertical --duration 20
Use only claims that appear in README.md or on the marketing pages.
Never show the admin area, API keys or seeded customer names.
Show me the plan and storyboard before you render.
On Remotion, two skills handle planning:
Product Launch Video asks nine questions at once (product, audience, core message, tone, duration, assets, voiceover, references, where it will be posted), proposes two or three visual directions and saves a storyboard.json before coding. It budgets narration at about 2.5 words per second and names no voice provider, so pair it with a text-to-speech tool (Step 3). It is a separate project from HyperFrames' own product launch workflow.
npx skills add memex-lab/product-launch-video-skill --skill product-launch-video -a claude-code -y
Product Film works inside or beside your codebase so it reuses your real components, design tokens (the named colors, fonts and spacing values in your code) and copy. It interviews you first, writes a brand kit and beat sheet, syncs scenes to music beats with Python helper scripts, keeps every rendered version, and asks before committing, pushing or publishing. One of its rules: show only what the product really does.
You need Node.js for Remotion, Python with uv for its beat-sync and verification scripts, and a full FFmpeg install, because its README notes that the FFmpeg bundled with Remotion lacks filters it uses. Its interview step is written for Claude Code's AskUserQuestion tool, so in other agents the questions arrive as plain chat.
npx skills add Rieranthony/product-film-skill --skill product-film -a claude-code -y
Step 3: Make the voiceover before you build the scenes
If the video has narration, make it right after the storyboard is approved. The audio lengths set the scene timings; Product Launch Video's README calls the voiceover the source of truth for pacing. Skip this step for a music-only clip. You can also record yourself: for a founder, your own voice is often the most credible.
HyperFrames' media-use skill makes narration in two ways (media-use skill):
- Through HeyGen. This needs a HeyGen account and the HeyGen CLI, version 0.3.0 or later. The skill says signing in with OAuth (
heygen auth login --oauth) gives a free allowance, while an API key bills API credits. The CLI's own README lists browser sign-in for Pro and Max subscribers, so check what your plan includes before you count on it. - With Kokoro, a voice model that runs on your machine for free. Brag's
--voiceoption uses it.
The HeyGen CLI is one program for macOS, Linux and Windows (through WSL), and it returns JSON. Besides speech, it creates avatar presenter videos from a prompt or template and translates and dubs videos. Unattended runs, such as a scheduled job, must use an API key.
curl -fsSL https://static.heygen.ai/cli/install.sh | bash && heygen auth login
For more voices, use ElevenLabs.
The ElevenLabs skills cover text to speech, speech to text, sound effects, music, dubbing and voice changing. They need an ELEVENLABS_API_KEY environment variable and work with any assistant that supports the Agent Skills format.
npx skills add elevenlabs/skills --skill '*' -a claude-code -y
If you planned with Product Launch Video, which writes storyboard.json, a prompt like this makes the narration and fixes the timings. On other paths, point the agent at your script file instead.
Read storyboard.json. For every scene with voiceover text, generate one
MP3 with ElevenLabs text to speech into public/vo-<scene-id>.mp3, using
one calm, mid-paced voice. Tell me the total character count before you
generate anything. Then measure each file and update the scene timings
to match the audio.
Step 4: Build the scenes from your product
In HyperFrames a composition is an HTML file with timing attributes; npx hyperframes preview opens a live preview in the browser and npx hyperframes render exports the MP4. The PR-to-video workflow reads a GitHub pull request through the gh CLI and turns it into a changelog or feature explainer, which suits release notes. In Remotion, keep Studio open while the agent works and run npx remotion render once the cut is approved.
Before any render, step through the preview and look for typos, text that flashes by too fast, real data that slipped in, screens that look different from the real product, and claims you did not approve.
Using /hyperframes:hyperframes (or /hyperframes with standalone skills),
make a 45-second 16:9 launch video for the feature in our latest release.
Recreate the three key screens in HTML with our real copy, colors and
fonts from our stylesheet or design tokens, matching the screenshots I
took from the demo account in shots/. Flag anything you could not match
exactly. Put every key claim on screen as text so it works muted, time
the scenes to the voiceover, and end on our URL. Lint and preview first,
and wait for my approval before rendering.
Step 5: Caption it
Feed viewers often watch with the sound off, so caption everything that is spoken. HyperFrames' audio engine transcribes for captions (Parakeet by default, whisper.cpp as fallback, per its audio reference), and Remotion's captions skill can import an .srt subtitle file. If you recorded your own narration, or want a separate subtitle file for YouTube, use WhisperX.
WhisperX runs locally in Python with word-level timestamps. It runs on a Mac CPU with --compute_type int8 --device cpu; GPU speed needs CUDA, which means an NVIDIA graphics card. Speaker labels need a Hugging Face token, which a single narrator does not need.
pip install whisperx
Transcribe public/voiceover.wav with whisperx on CPU
(--compute_type int8 --device cpu, language en). Fix our product and
feature names in the .srt to match README.md and show me the diff.
Then import it as captions: two lines maximum, clear of the frame edge.
Step 6: Encode a version for each channel
FFmpeg converts, cuts, joins and extracts frames, and ffprobe reports what is inside a file. You installed it in Before you start.
Make each aspect ratio from the composition rather than by cropping the finished file. Brag has vertical and square formats built in; with other workflows, ask the agent for a 9:16 or 4:5 version of the same scenes. Then let FFmpeg make web-friendly copies of the master render. Check each platform's current upload limits before you encode.
Run ffprobe on out/launch.mp4 and report resolution, frame rate,
duration and file size. Save frame 0 as poster.jpg. Without touching
the master, use ffmpeg to make out/launch-web.mp4 (H.264, yuv420p,
-movflags +faststart so it starts playing before it fully downloads)
and a muted copy, out/launch-muted.mp4, for autoplay on the landing
page. Report the new file sizes.
Step 7: Publish
yutu lets the agent upload videos and manage titles, descriptions, thumbnails, captions and playlists. First you need a Google Cloud project with the YouTube Data API v3 enabled, a Desktop app OAuth client with yourself as a test user, and one yutu auth run in the browser. Because that app stays in Testing, Google's sign-in token expires after 7 days (Google OAuth docs), so run yutu auth again if more than a week has passed. Google's videos.insert docs list a quota of 100 upload calls per day and say an upload with no privacy setting defaults to public, so always ask for private.
npm i -g @eat-pray-ai/yutu && claude mcp add -e YUTU_CREDENTIAL=/absolute/path/to/client_secret.json -e YUTU_CACHE_TOKEN=/absolute/path/to/youtube.token.json yutu -- yutu mcp
For Codex:
npm i -g @eat-pray-ai/yutu && codex mcp add --env YUTU_CREDENTIAL=/absolute/path/to/client_secret.json --env YUTU_CACHE_TOKEN=/absolute/path/to/youtube.token.json yutu -- yutu mcp
Upload out/launch.mp4 with yutu as private, title it "Introducing
Snapshots", attach captions/launch.en.srt and give me the link. I will
set the AI disclosure in YouTube Studio and make it public after I
review it.
Postiz CLI is Postiz's official agent CLI. It schedules posts to 28+ platforms including X, LinkedIn, Instagram, TikTok and YouTube, uploads images and video, and checks engagement. It needs Node.js and a Postiz account: Postiz Cloud is a subscription after a 7-day trial, and the open-source app is free to self-host if you run the server yourself. The CLI schedules posts by default, so ask for a draft.
npm install -g postiz && postiz auth:login
Upload out/launch-web.mp4 with the postiz CLI and create a draft post,
not a scheduled one, for our X and LinkedIn accounts using the text in
share-copy.txt. I will review and schedule it in Postiz myself.
What voice and avatar services cost
Prices as listed on 12 October 2026, monthly billing. They change often, so check before you budget.
| Service | Free tier | Paid entry point | Notes |
|---|---|---|---|
| ElevenLabs | 10,000 credits a month; no commercial license listed | Starter, $6 a month: 30,000 credits and a commercial license | Multilingual v2 uses 1 credit per character; Flash and Turbo use 0.5 to 1 credit through the API |
| HeyGen | 3 videos a month, up to 1 minute, watermarked | Creator, $29 a month: 600 credits, no watermark | The CLI README lists browser sign-in for Pro and Max; API keys draw on separate API credits |
| Remotion | Individuals, for-profit companies of up to 3 employees, non-profits | $25 per seat a month, or $0.01 per render ($100 minimum) | Applies whenever a skill renders with Remotion |
| HyperFrames | Free, Apache 2.0 | None for local rendering | HeyGen voice, catalog music and cloud rendering use your HeyGen account; Lambda runs on your AWS account |
The ElevenLabs skills call the API, and ElevenLabs' API pricing page lists per-character prices and included usage that differ from the app plans above, so check both.
For scale: at 2.5 words per second, a 60-second script is about 150 words, or roughly 900 characters, so ElevenLabs' free credits cover about ten full drafts on Multilingual v2. Publishing for a business is different, because the commercial license starts on Starter.
For an AI presenter on camera, use the HeyGen CLI from Step 3, which creates avatar presenter videos from a prompt or template.
Disclosing synthetic voices, music and avatars
This section summarizes public rules as of 12 October 2026; it is not legal advice. For paid ads, regulated products or campaigns aimed at the EU, have a qualified lawyer review the final cut.
YouTube requires disclosure when realistic AI content makes a real person appear to say or do something they did not, alters footage of a real event or place, shows a realistic scene that never happened, or creates music that is the main focus of the video. It does not require it for clearly unrealistic content (its example is an AI animation inside a fully animated video), production help such as AI-written scripts and outlines, captions, or cloning your own voice for voiceovers. You set it in YouTube Studio during upload: in the Attributes section, under AI use, choose Yes. The YouTube Data API has a containsSyntheticMedia field for the same purpose, but yutu's README does not say whether it sets it, so check in Studio. Creators who repeatedly fail to disclose can have a label applied, content removed or be suspended from the YouTube Partner Program.
In the EU, Article 50(4) of the AI Act requires those who use AI to make deep fakes to disclose that the content is artificially generated or manipulated. The Act defines a deep fake as AI-generated or manipulated image, audio or video content that resembles existing persons, objects, places, entities or events and would falsely appear to a person to be authentic or truthful. Article 50 applies from 2 August 2026. The Digital Omnibus on AI (Regulation (EU) 2026/1744, in force since 27 July 2026) left paragraph 4 unchanged: it rewrote paragraph 7 on codes of practice and gave providers of AI systems already on the market until 2 December 2026 to meet the marking duty in paragraph 2 (Digital Omnibus text). Both links go to an independent site that reproduces the official text; check EUR-Lex before relying on it.
In the US, the FTC's rule on fake reviews and testimonials, announced on 14 August 2024, covers testimonials that misrepresent that they come from someone who does not exist, such as AI-generated fake reviews (FTC). Never present an AI avatar as a customer.
In practice, an animated UI with a synthetic narrator rarely meets these definitions. These can: a photorealistic AI presenter (stock or custom), an avatar of a real person, a cloned voice of a real person, realistic generated footage of real places, and AI-generated music that carries the video. Product Launch Video's README lets the agent generate extra visuals such as background plates and environmental B-roll with text-to-image and text-to-video tools; if they look real, treat them as content to disclose. YouTube does not ask you to disclose a clone of your own voice, but the AI Act's definition has no such exception, so for EU audiences consider disclosing it too. Get written consent before cloning a teammate's voice, and say in the description when the narrator, presenter or music is AI-generated.
Limits and risks
- Licensing. Product Film, Product Launch Video and Remotion Best Practices all build and render Remotion projects, so a for-profit company with more than 3 employees needs a Remotion Company License to use them. HyperFrames is free, but voice, music and cloud renders through HeyGen fall under your HeyGen account.
- Claims. A launch video is advertising. Agents fill gaps with plausible features and numbers, so give them an approved claims list, have a second person sign it off before rendering, and check every number on screen.
- API keys and customer data. The agent reads your whole repo, including any keys stored in it, and screens from a real account show real records. Use a seeded demo account, scrub every frame, and keep customer data away from cloud voice and rendering services.
- Picking skills by rank. Generic listings such as ai-video-generation also rank in the skills.sh top 50, near the HyperFrames bundle. A high rank shows popularity, not fit. Read the README instead: what the skill outputs, what it needs, which services it calls and who publishes it.
- Music. Brag adds music by default; its audio reference says its sound effects are CC0 (public domain) but states no license for the bundled music. HyperFrames' media-use searches HeyGen's music catalog. Check the terms for any track a workflow adds on its own, or pass
--no-musicto Brag and use a track you have rights to. ElevenLabs lists music commercial use from the Starter plan. - Taste. The first render is a draft. Check pacing and readability yourself before anything goes public.