remotion-video-production

remotion-video-production

Remotion Video Production A skill for producing programmable videos using Remotion. Generate automated videos from text instructions and produce brand-consistent videos at scale. When to use this skill Automated video generation: Create videos from text instructions Brand video production: Consistent-style videos at scale Programmable content: Integrated narration, visuals, and animation Marketing content: Product introductions, onboarding, and promotional videos Instructions Step 1: Define the Video Spec video_spec: audience: [target audience] goal: [video purpose] duration: [total length - 30s, 60s, 90s] aspect_ratio: "16:9" | "1:1" | "9:16" tone: "fast" | "calm" | "cinematic" voice: style: [narration style] language: [language] Step 2: Outline Scenes Scene structure template: ## Scene Plan ### Scene 1: Hook (0:00 - 0:05) - Visual: Product logo fade-in - Audio: Upbeat intro - Text: "Transform Your Workflow" - Transition: Fade → Scene 2 ### Scene 2: Problem (0:05 - 0:15) - Visual: Problem scenario illustration - Audio: Narration begins - Text: Key message overlay - Transition: Slide left ### Scene 3: Solution (0:15 - 0:30) ... Step 3: Prepare Assets # Asset checklist assets/ ├── logos/ │ ├── logo-main.svg │ └── logo-white.svg ├── screenshots/ │ ├── dashboard.png │ └── feature-1.png ├── audio/ │ ├── bgm.mp3 │ └── narration.mp3 └── fonts/ └── brand-font.woff2 Asset preparation rules: Logos: SVG or high-resolution PNG Screenshots: Normalized to match aspect ratio Audio: MP3 or WAV, volume normalized Fonts: Web fonts or local font files Step 4: Implement Remotion Composition // src/Video.tsx import { Composition } from 'remotion'; import { IntroScene } from './scenes/IntroScene'; import { ProblemScene } from './scenes/ProblemScene'; import { SolutionScene } from './scenes/SolutionScene'; import { CTAScene } from './scenes/CTAScene'; export const RemotionVideo: React.FC = () => { return ( <> <Composition id="ProductIntro" component={ProductIntro} durationInFrames={1800} // 60s at 30fps fps={30} width={1920} height={1080} /> </> ); }; // Scene Component Example const IntroScene: React.FC<{ frame: number }> = ({ frame }) => { const opacity = interpolate(frame, [0, 30], [0, 1]); return ( <AbsoluteFill style={{ opacity }}> Transform Your Workflow ); }; Step 5: Render and QA # 1. Preview render (low quality) npx remotion preview src/Video.tsx # 2. QA checks - [ ] Timing verification - [ ] Audio sync - [ ] Text readability - [ ] Smooth transitions # 3. Final render npx remotion render src/Video.tsx ProductIntro out/video.mp4 Examples Example 1: Product Intro Video Prompt: Create a 60s product intro video with 6 scenes, upbeat tone, and 16:9 output. Include a CTA at the end. Expected output: ## Scene Breakdown 1. Hook (0:00-0:05): Logo + tagline 2. Problem (0:05-0:15): Pain point visualization 3. Solution (0:15-0:30): Product demo 4. Features (0:30-0:45): Key benefits (3 items) 5. Social Proof (0:45-0:55): Testimonial/stats 6. CTA (0:55-1:00): Call to action + contact ## Remotion Structure - src/scenes/HookScene.tsx - src/scenes/ProblemScene.tsx - src/scenes/SolutionScene.tsx - src/scenes/FeaturesScene.tsx - src/scenes/SocialProofScene.tsx - src/scenes/CTAScene.tsx Example 2: Onboarding Walkthrough Prompt: Generate a 45s onboarding walkthrough using screenshots, with callouts and 9:16 format for mobile. Expected output: Scene plan with 5 steps Asset list (screenshots, callout arrows) Text overlays and transitions Mobile-safe margins applied Best practices Short scenes: Keep scenes clear at 5-10 seconds each Consistent typography: Define a typography scale Audio sync: Align narration cues with visuals Template reuse: Save reusable compositions Safe zones: Ensure margins for mobile aspect ratios Common pitfalls Text overload: Limit the amount of text per scene Ignoring mobile safe zones: Check edges for 9:16 aspect ratio Final render before QA: Always check preview first Troubleshooting Issue: Audio and visuals out of sync Cause: Frame timing mismatch Solution: Recalculate frames and align timestamps Issue: Render is slow or fails Cause: Heavy assets or effects Solution: Compress assets and simplify animations Issue: Text unreadable Cause: Insufficient font size or contrast Solution: Use minimum 24px font and high-contrast colors Output format ## Video Production Report ### Spec - Duration: 60s - Aspect Ratio: 16:9 - FPS: 30 ### Scene Plan | Scene | Duration | Visual | Audio | Transition | |-------|----------|--------|-------|------------| | Hook | 0:00-0:05 | Logo fade | BGM start | Fade | | ... | ... | ... | ... | ... | ### Assets - [ ] logo.svg - [ ] screenshots (3) - [ ] bgm.mp3 - [ ] narration.mp3 ### Render Checklist - [ ] Preview QA passed - [ ] Audio sync verified - [ ] Safe zones checked - [ ] Final render complete Multi-Agent Workflow Validation & Retrospectives Round 1 (Orchestrator): Spec completeness, scene coverage Round 2 (Analyst): Narrative consistency, pacing review Round 3 (Executor): Render readiness checklist verification Agent Roles Agent Role Claude Scene planning, script writing Gemini Asset analysis, optimization suggestions Codex Remotion code generation, render execution Metadata Version Current Version: 1.0.0 Last Updated: 2026-01-21 Compatible Platforms: Claude, ChatGPT, Gemini, Codex Related Skills image-generation presentation-builder frontend-design Tags #video #remotion #animation #storytelling #automation #reactWeekly Installs8.4KRepositorysupercent-io/sk…templateGitHub Stars53First SeenJan 22, 2026Security AuditsGen Agent Trust HubPassSocketPassSnykPassInstalled onopencode8.3Kgemini-cli8.3Kcodex8.2Kgithub-copilot8.2Kcursor8.2Kcline8.1K