Remotion Video Templates

Premium Verified 334 lines By thrivemattic

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

Remotion Video Templates Generate data-driven promotional videos using 4 reusable Remotion comp Research 1. Key Principles 2. Step 1: Determine What… "New project setup" -- Scaffold Remotion project with 3. Step 2: Project Structu… Process 4. Step 3: Core Infrastruc… Every component: const s = useFontScale(); fontSize: sf(48, 5. Step 4: The 4 Compositi… 6. Step 5: Creating Scene… Every scene needs a duration in frames (30fps). Use the dura Output 7. Step 6: Root.tsx Regist… mf- = MetricFirst, ss- = SplitScreen, id- = IconDriven, tl- 8. Step 7: Rendering Run up to 6 renders in parallel 9. Step 8: Quality Check rules/readability.md -- font sizes, word limits, duration fo Continuous improvement cycle Click to enlarge

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

React TypeScript Remotion

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?
This skill works with React, TypeScript, and Remotion. Make sure these are available in your project before using the skill with Claude Code.
How detailed is the Remotion Video Templates skill?
Remotion Video Templates contains 334 lines of structured instructions covering 7 key areas. It provides comprehensive guidance including specific implementation patterns, not just surface-level tips.
Is Remotion Video Templates free to use?
Yes, Remotion Video Templates is a premium skill. Purchase details will be available on the skill page.
What will Claude Code learn from this skill?
Claude Code will gain expertise in: 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; and 4 more areas.

Purchase workflow will be available soon. Contact us to get early access.