remotion-best-practices

Name: remotion-best-practices
Availability: InStock
Author: rub803030

Provides domain rules and code patterns for building videos programmatically with Remotion and React.

Updated Apr 13, 2026

Search Tags:#best practices #react #captions #animation #video generation #remotion #programmatic video

Ready to run

npx skills add https://github.com/rub803030/examenprograma --skill remotion-best-practices-rub803030

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/rub803030/examenprograma/tree/main/EXAMEN_PROGRA_2-master/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/rub803030/examenprograma --skill remotion-best-practices-rub803030

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Remotion video code without domain knowledge leads to common rendering bugs such as flickering animations, unsynchronized media, and broken captions. This Skill supplies the correct patterns, APIs, and constraints for every major Remotion task. ## Core Features & Use Cases - Animation & Timing Rules: Enforces frame-driven animations with useCurrentFrame(), interpolate(), and spring() instead of forbidden CSS transitions. - Media Handling: Covers importing images, videos, audio, GIFs, Lottie files, and fonts, plus trimming, volume, pitch, and sequencing control. - Captions & Subtitles: Guides transcription with Whisper.cpp, SRT import, and TikTok-style caption display with word highlighting. - Use Case: When asked to build a video composition with animated charts, a voiceover, and synced captions, the Skill loads the relevant rule files so the generated code follows Remotion's rendering model correctly. ## Quick Start Ask the AI to create a Remotion composition with an animated bar chart and synced captions, and it will apply these best-practice rules automatically.

Frequently Asked Questions about remotion-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I animate elements in Remotion?▼

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(), writing durations in seconds multiplied by fps from useVideoConfig(). CSS transitions and Tailwind animation classes are forbidden because they do not render correctly.

How do I add captions or subtitles to a Remotion video?▼

Transcribe audio with the transcribe() function from @remotion/install-whisper-cpp, or import an existing .srt file using parseSrt() from @remotion/captions. Then group captions into pages with createTikTokStyleCaptions() and render each page in a Sequence with word highlighting.

How do I import images, videos, and audio in Remotion?▼

Place assets in the public/ folder and reference them with staticFile(), then render them with the Img component from remotion and the Video or Audio components from @remotion/media. Remote URLs with CORS enabled can be used directly without staticFile().

Can I use TailwindCSS or Three.js with Remotion?▼

Yes, TailwindCSS works once enabled in the project, but transition-* and animate-* classes must be avoided. Three.js content requires @remotion/three with ThreeCanvas, and all 3D animations must be driven by useCurrentFrame() rather than useFrame().

Why does my Remotion video flicker during rendering?▼

Flickering occurs when animations are not driven by useCurrentFrame(), such as CSS animations, third-party library animations, or useFrame() from React Three Fiber. Replace them with frame-based interpolation and disable built-in animations in chart or map libraries.

How do I get a video's duration or dimensions in Remotion?▼

Use Mediabunny's Input class with UrlSource or FileSource to call computeDuration() for duration or read displayWidth and displayHeight from the primary video track. These values can feed calculateMetadata to set composition duration and size dynamically.