Remotion Video Templates
Description
Generate data-driven promotional videos using 4 reusable Remotion composition templates. Each pattern produces 3 format variants (square, vertical, landscape) from a single scene data file.
4 Composition Approaches
- MetricFirst — Every scene anchored by an animated counter. Best for data-heavy case studies (8-12 scenes, ~35-45s)
- SplitScreen — Before/after dramatic reveals with divider sweep. Best for short-form transformation stories (4-6 scenes, ~20-25s)
- IconDriven — Lucide icons replace text bullets, max 8 words per frame. Best for infographic-style videos (7-10 scenes, ~35-45s)
- Timeline — Horizontal scrolling timeline with Lottie accents at milestones. Best for journey/chronological narratives (6-9 scenes, ~35-45s)
What It Does
Scaffolds a complete Remotion video project with brand config, responsive hooks, shared components, and all 4 composition templates. Creates scene data files from source documents, extracts key metrics, and maps them to the right visual approach. Handles Root.tsx registration with multi-format dimension presets and rendering commands.
Key Features
- 4 battle-tested composition patterns with consistent API
- Automatic multi-format output (1080×1080, 1080×1920, 1920×1080)
- Scene data driven — same compositions, different data files
- Built-in Lucide icon and Lottie animation registries
- Responsive font scaling via useFontScale hook
- Production checklist integration with remotion-best-practices
How It Works
What Claude Learns
- → Scaffold a complete Remotion video project with brand, hooks, and templates
- → Generate MetricFirst compositions for data-heavy case studies
- → Create SplitScreen before/after transformation videos
- → Build IconDriven infographic-style videos with Lucide icons
- → Design Timeline compositions for journey narratives
- → Create scene data files from source documents
- → Render multi-format output (square, vertical, landscape)
Installation
claude mcp add-skill remotion-video-templates
Stack & Dependencies
Use Cases
Scaffold a complete Remotion video project with brand, hooks, and templates
Using React and TypeScript
Generate MetricFirst compositions for data-heavy case studies
Using React and TypeScript
Create SplitScreen before/after transformation videos
Using React and TypeScript
Build IconDriven infographic-style videos with Lucide icons
Using React and TypeScript
Design Timeline compositions for journey narratives
Using React and TypeScript
Related Skills
Frequently Asked Questions
What technologies does Remotion Video Templates require?
How detailed is the Remotion Video Templates skill?
Is Remotion Video Templates free to use?
What will Claude Code learn from this skill?
Purchase workflow will be available soon. Contact us to get early access.