Help us improve
Share bugs, ideas, or general feedback.
From launch-skills
Plans and produces demo videos, GIFs, screenshots, and Remotion programmatic videos for product launches. Covers scripting, recording, best practices, and platform formats.
npx claudepluginhub amplitude/builder-skills --plugin launch-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/launch-skills:launch-videoThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
This skill covers the creation of visual and video assets for product launches. These are the highest-impact assets you'll create — a great demo video or GIF stops the scroll, communicates value faster than words, and gets shared. A bad one can actively undermine the launch by making the product look confusing or unpolished.
Generates a cinematic MP4 product launch video from a description using HTML/CSS animations, Playwright, and FFmpeg. No AI video APIs or runtime costs.
Generates marketing videos using AI generation models, AI avatars (HeyGen, Synthesia), and programmatic frameworks (Remotion, Hyperframes). Supports product demos, explainers, and social clips.
Creates video content using AI generation models, avatars, and programmatic frameworks like Remotion and HeyGen. Handles product demos, explainers, and social clips.
Share bugs, ideas, or general feedback.
This skill covers the creation of visual and video assets for product launches. These are the highest-impact assets you'll create — a great demo video or GIF stops the scroll, communicates value faster than words, and gets shared. A bad one can actively undermine the launch by making the product look confusing or unpolished.
For most launches, the decision of what to create follows this order:
In general: use video when the flow matters, GIF when a single interaction communicates the value, and screenshots when one specific state is the point.
| Platform | Target length | Hard limit |
|---|---|---|
| Product Hunt | 60-90 seconds | 3 minutes |
| Landing page hero | 60-90 seconds | 2 minutes |
| X/Twitter embedded | 30-45 seconds | 2 minutes 20 seconds |
| 45-90 seconds | 10 minutes | |
| YouTube (full demo) | 3-5 minutes | — |
The platform hard limits aren't just technical — engagement drops sharply beyond them. A 4-minute PH video is effectively no video.
Keep this to 5-7 beats:
Avoid: long intros, animated logos (audiences click away), slow product startup screens, and anything that doesn't show the product doing something.
Both work. The choice depends on context:
If you're unsure: record the demo silently, add text overlays for key moments, then decide whether to add voiceover based on the platform.
For teams that ship fast and don't want to wait on a motion designer for every launch, programmatic video lets you write React components and render them as MP4 files. The video is code: version-controlled, parametrized, and iteratable without a timeline editor.
Works well for:
Less suited for:
For major Tier 1 launches, you might combine approaches: programmatic video for social clips and a professional motion designer for the hero video.
npx create-video@latest my-launch-video
cd my-launch-video
npm start # Opens Remotion Studio for preview
Key concepts:
public/ folderBefore writing code, plan the video scene by scene:
| Field | Description |
|---|---|
| Scene # | Sequential number |
| Duration | Seconds (e.g., "3s") |
| Purpose | What this scene communicates (one sentence) |
| Text content | Exact text that appears on screen |
| Visual elements | Screenshots, icons, code snippets, diagrams |
| Animation style | Fade in, slide from left, typewriter, scale up, etc. |
| Transition out | How this scene exits (fade, cut, slide) |
Sequenced scenes:
<Sequence from={0} durationInFrames={90}>
<HookScene />
</Sequence>
<Sequence from={90} durationInFrames={120}>
<DemoScene />
</Sequence>
<Sequence from={210} durationInFrames={90}>
<CTAScene />
</Sequence>
Text reveal:
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], {
extrapolateRight: 'clamp',
});
return <h1 style={{ opacity }}>Your primary value prop here</h1>;
public/ foldernpx remotion render src/index.ts MyComposition out/video.mp4GIFs auto-play on most platforms and are ideal for showing a single interaction — a UI state change, a CLI command output, an API response. They're faster to produce than video and often more effective for social posts.
Use GIF when:
Use video when:
Screenshots are underused in launches. A well-composed screenshot with clear annotation communicates a feature faster than a paragraph.
For web products, use a browser frame to make screenshots look intentional rather than raw. Tools like Screely, Browserframe, or custom Figma templates add a browser chrome overlay.
Landing pages and Product Hunt galleries often need 3-5 screenshots showing different aspects of the product. Plan these as a set:
Every piece of content that gets shared as a link (blog post, landing page, changelog entry) should have a custom Open Graph (OG) image. The OG image is what appears when the link is pasted into Twitter, Slack, iMessage, or LinkedIn.
| Platform | Resolution | Max length | Format | Notes |
|---|---|---|---|---|
| X/Twitter | 1280×720 or 1920×1080 | 2:20 | MP4 (H.264) | Autoplay muted — add captions |
| 1920×1080 | 10 min | MP4 (H.264) | Square (1080×1080) works well in feed | |
| Product Hunt | 1920×1080 | 90 sec | MP4 | Keep under 50MB |
| Website hero | 1920×1080 | No limit | MP4/WebM | Consider autoplay loop (no audio) |