Remotion
Build and debug Remotion videos with focused references for React, TypeScript, animation timing, media assets, captions, transitions, charts, 3D, and render-safe composition structure.
Use this skill when you are creating a Remotion project, editing a composition, adding motion, syncing audio or video, building captions, rendering charts, using Lottie or 3D, measuring text, loading assets, or checking media duration and dimensions.
What This Helps With
| Area | Use it for |
|---|---|
| Compositions | Set up compositions, stills, folders, default props, and dynamic metadata. |
| Animation | Use frame-based timing, interpolation, easing, springs, sequencing, and transitions. |
| Media | Add local or remote images, video, audio, GIFs, trimming, looping, volume, and playback speed. |
| Captions | Import SRT captions, display subtitles, and work with transcription workflows. |
| Typography | Load fonts, use Tailwind, fit text, and measure text or DOM nodes. |
| Data visuals | Build animated charts with reusable chart examples. |
| Text effects | Add typewriter and word-highlight animation patterns. |
| 3D and motion assets | Work with Three.js, React Three Fiber, and Lottie. |
| Media inspection | Get audio/video duration, dimensions, decodability, and extracted frames. |
Why This Remotion Skill
| This skill | Starting from scattered docs or memory |
|---|---|
| Groups Remotion topics into task-focused references. | Search across many docs pages before finding the right API. |
| Includes reusable examples for charts and text animations. | Rebuild common motion patterns from scratch. |
| Covers timing, sequencing, trimming, transitions, and media together. | Debug render timing and media behavior piecemeal. |
| Includes references for captions, fonts, Tailwind, 3D, Lottie, and media probes. | Jump between unrelated examples for common video-building tasks. |
| Encourages render-safe, deterministic Remotion patterns. | Risk preview-only logic that breaks or drifts during render. |
Use this when you want practical Remotion guidance organized around the video task you are doing.
How To Use
- Identify the task: composition setup, animation, media, captions, text, charts, 3D, Lottie, metadata, measurement, or media inspection.
- Open the matching reference file from
references/. - Reuse the example assets when they match the task.
- Adapt the code to the existing Remotion project structure and package versions.
Reference Map
| File | Purpose |
|---|---|
references/compositions.md |
Compositions, stills, folders, default props, and metadata. |
references/animations.md |
Interpolation, easing, and frame-based animation basics. |
references/timing.md |
Timeline timing, frame math, and animation coordination. |
references/sequencing.md |
Scene order, offsets, delays, and timeline layout. |
references/transitions.md |
Transitions between scenes and visual states. |
references/trimming.md |
Trim media and control start or end timing. |
references/assets.md |
Asset loading and project media organization. |
references/images.md |
Images, sizing, loading, and render-safe usage. |
references/videos.md |
Video playback, timing, and media behavior. |
references/audio.md |
Audio playback, volume, speed, pitch, and looping. |
references/display-captions.md |
Display captions and subtitles in compositions. |
references/import-srt-captions.md |
Import SRT captions. |
references/transcribe-captions.md |
Caption transcription workflow notes. |
references/fonts.md |
Font loading and typography. |
references/tailwind.md |
Tailwind usage in Remotion. |
references/measuring-text.md |
Measure and fit text. |
references/measuring-dom-nodes.md |
Measure DOM nodes for layout. |
references/charts.md |
Animated chart patterns. |
references/text-animations.md |
Typewriter and word-highlight text effects. |
references/3d.md |
Three.js and React Three Fiber patterns. |
references/lottie.md |
Lottie animation usage. |
references/gifs.md |
GIF usage in Remotion. |
references/can-decode.md |
Check whether media can be decoded. |
references/extract-frames.md |
Extract video frames. |
references/get-audio-duration.md |
Get audio duration. |
references/get-video-dimensions.md |
Get video dimensions. |
references/get-video-duration.md |
Get video duration. |
Example Assets
| File | Purpose |
|---|---|
assets/charts-bar-chart.tsx |
Reusable animated bar chart example. |
assets/text-animations-typewriter.tsx |
Typewriter text animation example. |
assets/text-animations-word-highlight.tsx |
Word-highlight text animation example. |