skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion-best-practices

Create programmatic videos in React using Remotion components, animations, and media rules.

Updated Jun 22, 2026
Search Tags:#react#captions#animation#ffmpeg#video generation#remotion#programmatic video
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill remotion-best-practices-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/aashahin/ai-skills/tree/main/remotion-best-practices
Command: npx skills add https://github.com/aashahin/ai-skills --skill remotion-best-practices-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/captions, @remotion/three, @remotion/lottie, @remotion/google-fonts, @remotion/transitions, mediabunny, maplibre-gl, @turf/turf, zod, and includes references (resource) and assets (resource) components.

What problem does it solve? Writing Remotion video code requires frame-based animation, deterministic rendering, and media handling patterns that differ from standard React development, and mistakes like CSS transitions cause broken renders. ## Core Features & Use Cases - Project scaffolding and composition setup: Create new Remotion projects, define compositions with width, height, fps, and duration, and compute metadata dynamically with calculateMetadata. - Frame-driven animation patterns: Animate with useCurrentFrame, interpolate, Easing curves, springs, and Sequence-based timing instead of forbidden CSS transitions. - Media and asset handling: Embed images, videos, audio, GIFs, Lottie files, 3D content, fonts, captions, and maps using dedicated rule files loaded on demand. - Use Case: Build a captioned social media video by scaffolding a project, transcribing audio with Whisper, displaying TikTok-style captions, and rendering with the Remotion CLI. ## Quick Start Use the remotion-best-practices skill to scaffold a new Remotion video project and add an animated title composition.

Frequently Asked Questions about remotion-best-practices

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

FAQPage Schema
How do I create a new Remotion video project?▼

Run npx create-video@latest --yes --blank --no-tailwind followed by your project name in an empty folder. This scaffolds a minimal Remotion project where you define compositions in src/Root.tsx with width, height, fps, and durationInFrames.

How do I animate elements in Remotion?▼

Animate using useCurrentFrame() combined with interpolate() and Easing.bezier curves for timing control. CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly in Remotion's frame-based pipeline.

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

Transcribe audio with the transcribe() function from @remotion/install-whisper-cpp, or import existing .srt files with parseSrt() from @remotion/captions. Display them using createTikTokStyleCaptions() to group words into pages with word-level highlighting.

Can I use Three.js 3D content in Remotion?▼

Yes, install @remotion/three and wrap 3D content in ThreeCanvas with explicit width and height props. All animations must be driven by useCurrentFrame(); using useFrame() from @react-three/fiber is forbidden because it causes flickering during rendering.

Why does my Remotion video show frozen frames after trimming with FFmpeg?▼

FFmpeg trimming without re-encoding can leave frozen frames at the start. Either use the trimBefore and trimAfter props on the Video component for non-destructive trimming, or re-encode with -c:v libx264 when producing a standalone trimmed file.

How do I make a Remotion composition duration match a video file?▼

Use the calculateMetadata function on a Composition to fetch the video duration with Mediabunny's computeDuration, then return durationInFrames calculated from the seconds value multiplied by your fps. Dimensions can be matched the same way.

Related Skills

Explore More Software Engineering Skills→
himanshu231204himanshu231204
2

video-editing

Automate raw footage editing into platform-ready videos with FFmpeg and Remotion.

Community
Intermediate
openaiopenai
5.3k

remotion-render

Render Remotion videos and stills via CLI with transparent ProRes and WebM output options.

Official
Basic
compozycompozy
182

hyperframes-media

Generate TTS audio, word-timestamp transcripts, and transparent overlays for HyperFrames.

Official
Advanced
anavvanzinanavvanzin

agency-short-video-editing-coach

Coach short-video editors through post-production workflows in CapCut Pro, Premiere Pro, DaVinci Resolve, and Final Cut Pro.

Community
Advanced