wshuyi/remotion-video-skill

Overview

This skill lets you create programmatic videos with the Remotion framework using React components. It supports frame-driven animation, sequences, 3D scenes, and audio synchronization so you can produce MP4/WebM/GIF outputs reliably. It also includes TTS integration options for AI narration and scripts to generate audio and scene configs.

How this skill works

You author React components as Compositions and drive visuals with useCurrentFrame(), interpolate(), and spring() to map frames to animated values. Scenes are arranged with <Sequence> and audio is synced via an audioConfig that defines per-scene durations. The skill provides scripts for generating TTS audio (MiniMax or Edge) and utilities to produce audioConfig.ts used by the Remotion root composition. Rendering uses remotion CLI or cloud runners (Lambda) to produce final assets.

When to use it

• Batch-generate many videos from data (reports, summaries)
• Create data-driven or templated videos with dynamic props
• Produce tutorial or explainer videos synchronized to narration
• Build music visualizers or automatic subtitle workflows
• Create 3D product demos, logo intros, or character animations

Best practices

• Make each scene a single-responsibility component so animations start from frame 0
• Drive all timing from a single audioConfig to avoid hard-coded frame mismatches
• Use interpolate() and spring() for smooth transitions and clamp values to prevent overshoot
• For 3D scenes, render only one ThreeCanvas at a time and set camera positions directly to avoid jitter
• Use MiniMax TTS when available for fast cloud generation; fall back to Edge TTS if no API key

Example use cases

• Generate annual summary videos by iterating over a dataset and composing scenes per item
• Produce lecture-style tutorials where each chapter is one scene tied to a TTS audio file
• Create music visualizers that map audio features to visual parameters via interpolate()
• Render product showcase videos with GLTF models and camera presets for each shot
• Automate subtitling by transcribing audio and rendering captions with @remotion/captions