Product Launch Video
heygen-com/hyperframes
Turns a product URL, script or brief into a launch or promo video built frame by frame in HyperFrames, from brand capture and story design to rendering.
Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.
Install Launch Video
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install charlie947/motion-graphics-skills launch-video --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/launch-video .claude/skills/launch-video && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .claude/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-videoType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install charlie947/motion-graphics-skills launch-video --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/launch-video .agents/skills/launch-video && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .agents/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install charlie947/motion-graphics-skills launch-video --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/launch-video .cursor/skills/launch-video && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .cursor/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/charlie947/motion-graphics-skills.git --path skills/launch-video--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install charlie947/motion-graphics-skills launch-video --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/launch-video .gemini/skills/launch-video && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .gemini/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install charlie947/motion-graphics-skills launch-videoInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/launch-video .github/skills/launch-video && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .github/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add charlie947/motion-graphics-skills --skill launch-video -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install charlie947/motion-graphics-skills launch-video --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/charlie947/motion-graphics-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/launch-video .opencode/skills/launch-video && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "launch-video" agent skill from https://github.com/charlie947/motion-graphics-skills/tree/main/skills/launch-video into .opencode/skills/launch-video/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "launch-video", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
launch-video- GitHub stars
- 180
- Token cost
- ~1.1k tokens
- SKILL.md length
- 479 words
- Files
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.
- Works in 5 steps: Ask for five things, then wait → Lay out the beats → Build brief (paste into Claude Code) → …
- Someone says launch video
- SKILL.md covers Step 1: Ask for five things,…, What "premium" means here…, Step 2: Lay out the beats and Step 3: Build brief (paste…, plus 2 more sections
- Calls npx
What it does
Launch Video is an agent skill from charlie947/motion-graphics-skills. Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".
Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Product launch strategy, Video production and Motion graphics. The repository describes itself as: 13 Claude Code skills for launch-grade motion graphics. Every frame is code. No After Effects, no video generator. The licence is MIT.
When your agent uses it
- Someone says launch video
- Promo video for my product
- Announce my course/cohort/offer
- Make a launch reel
Example prompts
- “launch video”
- “promo video for my product”
- “announce my course/cohort/offer”
- “/launch-video”
Requirements
- Node.js
Workflow steps
5 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit dfc4284. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Launch Video loads about 1.1k tokens when it runs. Until then it costs about 103 tokens; SKILL.md has 479 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from charlie947/motion-graphics-skills at commit dfc4284, republished under its MIT licence (© charlie947). 479 words, ~1,122 tokens.
Download SKILL.mdSave it as
.claude/skills/launch-video/SKILL.md (or your agent's skills folder).- name
- launch-video
- description
- Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. One sentence split across scenes, real product screens with slow camera moves, a typed prompt, a proof beat and a clear call to action. Use when someone says "launch video", "promo video for my product", "announce my course/cohort/offer", "make a launch reel" or "trailer for my product".
Launch video, built in code
A launch video sells one thing in 30-45 seconds. You build it as one HTML file with window.seek(seconds), then export to MP4.
Before you start: read brand.md and MOTION.md if they exist. If not, run brand-intake first, or ask for hex codes, a font and a logo file. Never call a result on-brand without them.
Step 1: Ask for five things, then wait
- What's launching, in one line. Example: "LinkedIn AI OS, a six-week cohort that sets up your content system."
- The one sentence the video says, split into 3-5 beats. Example: "Your next post, / in your voice, / checked before you see it."
- Proof. Real screenshots of the product, real results with their source, or real customer posts. Attached files only.
- The call to action, word for word, exactly as it appears on the sales page.
- Brand. Hex codes, font, logo file. Plus the size: 1920 x 1080, 1080 x 1350 or 1080 x 1920.
Never invent a price, a date, a "spots left" count, a testimonial or a result.
What "premium" means here (learned the hard way)
Three first drafts were rejected as "not premium" and "not my brand colours". What fixed it:
- Your real brand colours, sampled from your landing page or your best graphic. Never a default palette.
- Glass UI. Product surfaces as frosted, liquid-glass panels with soft depth, like Apple's current UI.
- The prompt typed live into a real-looking input box. That is the one place typing belongs.
- Real, recent work on the proof cards, not old examples.
- Variety. No two beats share the same layout.
Build the first 10 seconds in two or three styles first. Pick one. Only then build the rest.
Show full SKILL.md (191 more words)Show less
Step 2: Lay out the beats
Default 7 beats, 45 seconds:
| # | Time | Beat |
|---|---|---|
| 1 | 0-4s | First words of the sentence, big, on a clean background. The hook. |
| 2 | 4-9s | Next words over real proof (posts, results, screens). |
| 3 | 9-17s | The product working: a screen, a cursor typing a real prompt, the output appearing. |
| 4 | 17-22s | The quality beat: something checks, passes or ticks. |
| 5 | 22-32s | How it works: steps, weeks or features as one simple visual. |
| 6 | 32-38s | The number that matters, counted up, with its source. |
| 7 | 38-45s | Name, call to action, requirement. Holds long enough to read. |
Show the beat sheet and wait for a yes.
Step 3: Build brief (paste into Claude Code)
Build one self-contained HTML file called index.html for a [LENGTH]-second product launch video at [WIDTH] x [HEIGHT]. Use only the files I attached. Nothing loaded from the internet.
Style: clean, premium product launch. Background [BG], text [TEXT], one accent [ACCENT], font [FONT] or a system sans-serif. Generous space. Product screens float on soft shadows with slow push-ins. One sentence is split across the beats and each fragment lands with a short, confident move.
Banned: typewriter reveals on headlines (typing belongs only inside the product's input box), glow, bouncing, gradients on text, stock-photo people, fake testimonials, any number I did not give you.
Beats: follow my beat sheet exactly, with its timings.
Build rules: work out every frame from the time alone. Add window.seek(seconds) that draws that exact moment. Autoplay on a loop when opened normally, wait for seek when the URL has ?render.
After the build: capture one frame from the middle of every beat. Check for cut-off text, overlapping elements, anything unreadable at phone size, and any word or number not in my brief. Fix what is real and keep the first version.Step 4: Check it like a buyer
- Would a stranger know what's launching by second 4?
- Is every number traceable to a source?
- Does the call to action hold for at least 3 seconds?
- Is it readable on a phone, with the sound off?
Step 5: Export
HyperFrames (free, open source): npx skills add heygen-com/hyperframes, then npx hyperframes render. Export a 16:9 and a 4:5 cut. Check which tools exist before installing, and ask first.
© charlie947, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/launch-video of charlie947/motion-graphics-skills.
Open the folder on GitHubat commit dfc4284
Compare with similar skills
Launch Video next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Launch Video this skillcharlie947/motion-graphics-skills | 180 | — | ~1.1k | Automated safety check: Pass | MIT | |
| Product Launch Videoheygen-com/hyperframes | 60k | 3 repos | ~8.5k | Automated safety check: Notes | Apache-2.0 | |
| Qiaomu Cutjoeseesun/qiaomu-cut-skill | 372 | — | ~6.8k | Automated safety check: Notes | MIT | |
| Agentsope AI Video Directoragentsope/SkillAlchemy | 436 | — | ~3.5k | Automated safety check: Pass | MIT | |
| HyperFrames Animationheygen-com/hyperframes | 60k | 3 repos | ~2.1k | Automated safety check: Pass | Apache-2.0 | |
| Stitch to Remotion Walkthrough Videosgoogle-labs-code/stitch-skills | 8.5k | 6 repos | ~3.2k | Automated safety check: Notes | Apache-2.0 |
Similar skills
Qiaomu Cut
joeseesun/qiaomu-cut-skill
把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video—including one-line requests such as “制作一个科普视频：介绍…
Agentsope AI Video Director
agentsope/SkillAlchemy
Direct and implement programmatic videos from a natural-language sentence: brief, shots, style, timeline, assets, engine-specific coding prompts, draft, review and repair.
HyperFrames Animation
heygen-com/hyperframes
Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.
- Official
Stitch to Remotion Walkthrough Videos
google-labs-code/stitch-skills
Builds walkthrough videos from Stitch design projects using Remotion, with transitions, zoom effects and text overlays on each screen.
Faceless Explainer Video
heygen-com/hyperframes
Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.
More from charlie947/motion-graphics-skills
All 9 skills in this repoMotion Effects
charlie947/motion-graphics-skills
Build any of 16 premium motion effects from scratch in your own brand, as one 8-second looping HTML file with window.seek(seconds) so it exports frame-exact to MP4 or GIF.
Animated Chart
charlie947/motion-graphics-skills
Make a looping animated chart for LinkedIn or a newsletter in code with Claude Code.
Apple Launch Film
charlie947/motion-graphics-skills
Rebuild an Apple-style Mac launch film entirely in code with Claude Code.
Loop Cover
charlie947/motion-graphics-skills
Turn a newsletter or blog cover into a seamless looping GIF at 896 x 640, 180 frames at 20fps.
Milestone Reveal
charlie947/motion-graphics-skills
Make a 12-second looping milestone clip in code with Claude Code.
Model Showdown
charlie947/motion-graphics-skills
Give the same motion brief to three AI models, keep each first try, render all three the same way and stack them into one comparison video with model names and logos.
Related
Categories
Questions about Launch Video
What does Launch Video do?
Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day. Launch Video is an agent skill from charlie947/motion-graphics-skills. Make a 30-45 second product launch video in code with Claude Code, the kind SaaS companies post on launch day.
When should I use Launch Video?
Launch Video fits situations like: someone says launch video; promo video for my product; announce my course/cohort/offer; make a launch reel.
How do I install Launch Video in Claude Code?
Run `npx skills add charlie947/motion-graphics-skills --skill launch-video -a claude-code`. Or copy the skill folder (skills/launch-video in charlie947/motion-graphics-skills) into .claude/skills/launch-video in your project. Claude Code loads it when a task matches its description.
How do I install Launch Video in Codex?
Run `npx skills add charlie947/motion-graphics-skills --skill launch-video -a codex`. Or copy the skill folder (skills/launch-video in charlie947/motion-graphics-skills) into .agents/skills/launch-video in your project. Codex loads it when a task matches its description.
Can I use Launch Video in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add charlie947/motion-graphics-skills --skill launch-video -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/launch-video, .gemini/skills/launch-video, .github/skills/launch-video and .opencode/skills/launch-video in your project.
What does Launch Video need to run?
Going by SKILL.md and its folder, Launch Video needs the command-line tools its instructions call (npx). Our summary lists: Node.js.
Does Launch Video access the network?
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Launch Video safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Launch Video use?
Launch Video is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Launch Video use?
About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Launch Video?
Skills that share tags, products or a category with Launch Video: Product Launch Video (heygen-com/hyperframes, 60k stars), Qiaomu Cut (joeseesun/qiaomu-cut-skill, 372 stars), Agentsope AI Video Director (agentsope/SkillAlchemy, 436 stars) and HyperFrames Animation (heygen-com/hyperframes, 60k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Launch Video?
charlie947 (a GitHub user) maintains it in charlie947/motion-graphics-skills, which has 180 GitHub stars. The repository was last updated on October 10, 2026.
Source: charlie947/motion-graphics-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.