skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

remotion-best-practices

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

3|1|Updated Apr 29, 2026
Search Tags:#react#video#captions#composition#animation#ffmpeg#remotion
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill remotion-best-practices-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/visual-content/skills/remotion-best-practices
Command: npx skills add https://github.com/firstsun-dev/skills --skill remotion-best-practices-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing Remotion video code requires framework-specific knowledge that general React experience does not cover, such as frame-driven animation, sequence timing, media handling, and rendering constraints. This Skill supplies the domain rules and patterns needed to produce correct Remotion compositions on the first attempt. ## Core Features & Use Cases - Project scaffolding and animation patterns: Scaffold new projects with create-video, animate with useCurrentFrame() and interpolate(), and avoid forbidden CSS transitions that break rendering. - Media and asset handling: Embed images, videos, audio, GIFs, Lottie files, and fonts using staticFile() and dedicated Remotion packages. - Specialized rule files: Load on-demand guidance for captions, subtitles, audio visualization, 3D with Three.js, maps with MapLibre, visual effects, transitions, and FFmpeg operations. - Use Case: A developer asked to build a captioned promotional video can scaffold the project, compose timed sequences, generate TikTok-style captions, and render a single-frame check, all following the Skill's rules. ## Quick Start Use the remotion-best-practices skill to scaffold a new Remotion project and build an animated title sequence with a fade-in effect.

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 video with React using Remotion?▼

Scaffold a project with npx create-video@latest, define a Composition in src/Root.tsx with width, height, fps, and durationInFrames, then build scenes as React components. Preview the result with npx remotion studio.

How do I animate elements in Remotion?▼

Animate using useCurrentFrame() combined with interpolate(), and customize timing with Easing.bezier(). CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they do not render correctly.

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

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

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

Install @remotion/captions, then either transcribe audio or import an .srt file with parseSrt(). Use createTikTokStyleCaptions() to group words into pages and render each page in a Sequence with word-level highlighting.

Why does my Remotion animation flicker or not render?▼

Flickering usually comes from animations not driven by useCurrentFrame(), such as CSS transitions or self-animating Three.js shaders. All motion must derive from the current frame so each rendered frame is deterministic.

How do I trim a video in Remotion without re-encoding?▼

Use the trimBefore and trimAfter props on the Video component from @remotion/media, which is non-destructive. Only use npx remotion ffmpeg with re-encoding when you need a standalone trimmed file for external use.

Related Skills

Explore More Design & Creative Skills→
sunzcdevsunzcdev

remotion-best-practices

Enforce deterministic Remotion implementation rules for media, timing, and overlays.

Community
Intermediate
openaiopenai
5.3k

remotion-render

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

Official
Basic
calesthiocalesthio
55.1k

doubao-tts

Generate Mandarin narration audio with word-level timestamps using Volcengine Doubao Speech 2.0.

Community
Intermediate
inclusionAIinclusionAI
1.2k

embedded-video-pip-smooth-playback

Re-encode embedded videos to all-intra H.264 for smooth frame-accurate playback in code-driven renderers.

Official
Basic