Create modern product launch/pitch videos using Remotion. Use when creating app promo videos, SaaS launch videos, product demos, or startup pitch videos.
Create professional, modern product launch videos using Remotion and React.
WARNING: Do NOT skip this step. Skipping will result in missing rich expression opportunities.
This skill extends Remotion best practices. You MUST do both:
Load the skill first:
/remotion-best-practices
Read the SKILL.md of remotion-best-practices and identify which rules are relevant to the product (maps, charts, text animations, 3D, lottie, etc.)
Before asking for screenshots, analyze the product and find relevant rich expressions from remotion-best-practices.
Replace static screenshots with dynamic content wherever possible:
Read the relevant rule files from remotion-best-practices and use them.
Use AskUserQuestion to ask:
Device Type: Is the product primarily for smartphone (SP) or PC/Desktop?
Screenshot Theme: Should screenshots be in Light mode or Dark mode?
BGM (Background Music): Add background music?
Note: Screenshots for scenes using rich expressions (Step 1) are not needed.
Required images (place in public/ folder):
| File | Purpose | Required |
|---|---|---|
mockup.png | Main product screenshot (Mockups scene) | Yes |
feature-1.png | Feature 1 screenshot | Yes |
feature-2.png | Feature 2 screenshot | Optional |
feature-3.png | Feature 3 screenshot | Optional |
Required information:
ls public/*.png
Create src/remotion/[ProductName]/[ProductName]Intro.tsx with all scenes.
Add to Root.tsx. IMPORTANT: Calculate durationInFrames correctly:
durationInFrames = Sum of scene durations - (transition duration × number of transitions)
See rules/duration-calculation.md for details.
Run pnpm run dev (or bun run remotion) and preview the video.
┌─────────────────────────────────────────────────────────────┐
│ 1. REVEAL 2. CONCEPT 3. MOCKUPS │
│ (2-3s) (3-4s) (3-4s) │
│ Logo/Name Value prop Product preview │
├─────────────────────────────────────────────────────────────┤
│ 4. FEATURE 1 5. FEATURE 2 6. FEATURE 3 │
│ (3-4s each) (optional) (optional) │
│ Screenshot + Screenshot + Screenshot + │
│ Title/Desc Title/Desc Title/Desc │
├─────────────────────────────────────────────────────────────┤
│ 7. OUTRO 8. CTA │
│ (2-3s) (3-4s) │
│ Summary URL + Action │
└─────────────────────────────────────────────────────────────┘
| Scene | Duration | Content | Asset |
|---|---|---|---|
| 1. Reveal | 2-3s | Product name, minimal animation | - |
| 2. Concept | 3-4s | Tagline, value proposition | - |
| 3. Mockups | 3-4s | Device mockup with main screenshot | mockup.png or rich expression |
| 4. Feature 1 | 3-4s | Feature title + screenshot | feature-1.png or rich expression |
| 5. Feature 2 | 3-4s | Feature title + screenshot | feature-2.png or rich expression |
| 6. Feature 3 | 3-4s | Feature title + screenshot | feature-3.png or rich expression |
| 7. Outro | 2-3s | Product name + summary | - |
| 8. CTA | 3-4s | URL, call to action | - |
Total Duration: 15-25 seconds (depending on feature count)
| Element | Do | Don't |
|---|---|---|
| Background | Solid dark #0a0a0a | Gradients |
| Typography | Single font (Inter/Noto Sans JP) | Multiple fonts |
| Animation | Subtle fade/slide | Bouncy/flashy |
| Mockups | Real screenshots or rich expressions | Placeholder graphics |
| Text | Minimal, clear | Long paragraphs |
For comprehensive guidance, read these rule files:
// Scene order
<TransitionSeries>
<RevealScene /> {/* 1. Logo/Name */}
<ConceptScene /> {/* 2. Value proposition */}
<MockupsScene /> {/* 3. Main product mockup */}
<FeatureScene n={1} /> {/* 4. Feature 1 */}
<FeatureScene n={2} /> {/* 5. Feature 2 (if provided) */}
<FeatureScene n={3} /> {/* 6. Feature 3 (if provided) */}
<OutroScene /> {/* 7. Summary */}
<CTAScene /> {/* 8. Call to action */}
</TransitionSeries>
/remotion-best-practices executed and relevant rules read)