Modern Short Video Skill
Create professional, modern product launch videos using Remotion and React.
Prerequisites (MANDATORY)
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.)
Workflow Step 1: Analyze Product & Select Rich Expressions (CRITICAL)
Before asking for screenshots, analyze the product and find relevant rich expressions from remotion-best-practices.
Replace static screenshots with dynamic content wherever possible:
Map app → animated map with route drawing Dashboard → animated charts Text app → typewriter effects etc.
Read the relevant rule files from remotion-best-practices and use them.
Step 2: Device, Theme & BGM Questions
Use AskUserQuestion to ask:
Device Type: Is the product primarily for smartphone (SP) or PC/Desktop?
SP (Smartphone) → Use phone mockup frame PC/Desktop → Use browser/desktop mockup frame
Screenshot Theme: Should screenshots be in Light mode or Dark mode?
Dark mode (Recommended) → Blends with video background (#0a0a0a) Light mode → Higher contrast, screenshots stand out more
BGM (Background Music): Add background music?
Yes (Recommended) → Download free music from Pixabay No → Create video without BGM Step 3: Collect Screenshots
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 Step 4: Collect Content
Required information:
Product name One-line tagline/concept Feature 1: Title + short description Feature 2: Title + short description (optional) Feature 3: Title + short description (optional) CTA text (e.g., "Try it free") URL Step 5: Verify Assets ls public/*.png
Step 6: Create Composition
Create src/remotion/[ProductName]/[ProductName]Intro.tsx with all scenes.
Step 7: Register & Calculate Duration
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.
Step 8: Test
Run pnpm run dev (or bun run remotion) and preview the video.
Scene Structure (8 Scenes) ┌─────────────────────────────────────────────────────────────┐ │ 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 Details 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)
Design Rules 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 Detailed Guidelines
For comprehensive guidance, read these rule files:
rules/design-principles.md - Visual design system
rules/scene-structure.md - Scene composition patterns
rules/visual-elements.md - Mockups, typography, colors
rules/animation-patterns.md - Motion design patterns
rules/code-templates.md - Ready-to-use Remotion components
rules/duration-calculation.md - How to calculate total video duration
rules/bgm.md - Background music source and implementation
Quick Reference: Scene Components
// Scene order
Checklist Before Delivery Prerequisites loaded (/remotion-best-practices executed and relevant rules read) Rich expressions used where applicable (maps, charts, text animations, etc.) Screenshots collected for scenes not using rich expressions Screenshots are high quality (2x resolution preferred) Text is readable at 720p Total duration 15-25 seconds durationInFrames correctly calculated (subtract transition overlaps!) No black frames at the end of video Transitions are smooth (fade, 15 frames) CTA and URL clearly visible BGM added (optional, volume ~0.25)