skills.rest
Asygnuz-S-A-S
Asygnuz-S-A-SOFFICIAL
Explore all skills by this author →
GitHub

remotion-best-practices

Guides building programmatic videos in React with Remotion, from animation to rendering.

Updated May 22, 2026
Search Tags:#react#rendering#video#captions#animation#remotion#programmatic video
One-click install
npx skills add https://github.com/Asygnuz-S-A-S/one-star --skill remotion-best-practices-asygnuz-s-a-s
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/Asygnuz-S-A-S/one-star/tree/main/.agents/skills/remotion-best-practices
Command: npx skills add https://github.com/Asygnuz-S-A-S/one-star --skill remotion-best-practices-asygnuz-s-a-s

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Writing Remotion code without domain knowledge leads to common mistakes like CSS transitions that never render, self-animating 3D scenes that flicker, or misused sequencing APIs. This Skill provides the correct patterns and API usage for building videos programmatically in React and TypeScript. ## Core Features & Use Cases - Animation & Sequencing: Correct use of useCurrentFrame(), interpolate(), spring(), Sequence, Series, and TransitionSeries for timeline-driven motion. - Media Handling: Patterns for images, videos, audio, GIFs, Lottie, captions, fonts, 3D content with Three.js, and map animations with MapLibre. - Dynamic Compositions: Use calculateMetadata to set duration, dimensions, and props from data, plus Zod schemas for parameterized videos. - Use Case: When asked to create a promotional video with animated captions synced to a voiceover, the Skill directs you to scaffold with create-video, transcribe audio into captions, display them TikTok-style with word highlighting, and render to MP4. ## Quick Start Ask the AI to create a Remotion video project with an animated title that fades in over two seconds and renders to MP4.

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 a Remotion video?▼

Use useCurrentFrame() with interpolate() to map frame numbers to CSS values, and customize timing with Easing.bezier(). Prefer interpolate() over spring() unless physics-based motion is needed, and never use CSS transitions or animations since they do not render.

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

Install @remotion/captions, transcribe audio or import an .srt file with parseSrt(), then group captions into pages with createTikTokStyleCaptions(). Render each page in a Sequence and highlight the active word using token timestamps.

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

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

How do I make a Remotion video duration match an audio or video file?▼

Use calculateMetadata on the Composition and compute duration from the media file, for example with Mediabunny's computeDuration() or getGifDurationInSeconds() from @remotion/gif. Return durationInFrames as seconds multiplied by fps.

Why does my Remotion animation not render correctly?▼

CSS transitions, CSS animations, and Tailwind animation classes are forbidden because they are time-based rather than frame-based and will not render. Replace them with interpolate() driven by useCurrentFrame() so every 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 and frame-accurate. Only use the FFmpeg CLI 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
remotion-devremotion-dev
57.9k

homepage-video-assets

Render and distribute transparent Remotion homepage creator strip videos for Chrome and Safari.

Official
Intermediate
jholhewresjholhewres
3

audio-tts

Convert text to speech and manipulate audio via APIs and command-line tools.

Community
Intermediate
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