skills.rest
Haseeb-Arshad
Haseeb-ArshadCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

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

Updated Mar 23, 2026
Search Tags:#react#video#captions#animation#remotion#compositions#mediabunny
One-click install
npx skills add https://github.com/Haseeb-Arshad/my-folio-book --skill remotion-best-practices-haseeb-arshad
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/Haseeb-Arshad/my-folio-book/tree/main/.continue/skills/remotion-best-practices
Command: npx skills add https://github.com/Haseeb-Arshad/my-folio-book --skill remotion-best-practices-haseeb-arshad

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Writing Remotion video code without domain knowledge leads to common mistakes like flickering animations, unloaded assets, and incorrect timing, since Remotion requires all animations to be driven by useCurrentFrame() rather than CSS or library defaults. ## Core Features & Use Cases - Animation & Timing Rules: Enforces frame-driven animations using useCurrentFrame(), interpolate(), and spring() instead of forbidden CSS transitions or Tailwind animation classes. - Media Handling: Covers importing images, videos, audio, fonts, GIFs, and Lottie files with staticFile(), plus trimming, volume, pitch, and looping controls. - Specialized Workflows: Includes rules for captions/subtitles, audio visualization, 3D with Three.js, Mapbox map animations, charts, transitions, and dynamic metadata via calculateMetadata. - Use Case: When asked to add a TikTok-style caption overlay to a video composition, load the subtitles and display-captions rules to correctly fetch caption JSON, create pages with createTikTokStyleCaptions(), and highlight words per frame. ## Quick Start Ask the AI to apply Remotion best practices when creating or modifying any Remotion composition, animation, or media component in the project.

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 without flickering?▼

Drive all animations with the useCurrentFrame() hook combined with interpolate() or spring(). CSS transitions, CSS animations, and Tailwind animate-* classes are forbidden because they do not render correctly during video export.

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

Use the @remotion/captions package with the Caption type. Transcribe audio to generate captions, import existing .srt files with parseSrt(), or display them with createTikTokStyleCaptions() for word-by-word highlighting pages.

How do I trim a video in Remotion?▼

Use the trimBefore and trimAfter props on the Video component from @remotion/media for non-destructive trimming in frames. Alternatively, run FFmpeg via bunx remotion ffmpeg with re-encoding to avoid frozen frames at the start.

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

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

Why does my Remotion animation flicker during rendering?▼

Flickering happens when animations are not driven by useCurrentFrame(), such as CSS transitions, library default animations, or Mapbox fade settings. Disable third-party animation defaults and compute all visual state from the current frame.

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

Use Mediabunny's Input with UrlSource or FileSource to call computeDuration() for duration or read displayWidth and displayHeight from the primary video track. These helpers work in browser, Node.js, and Bun environments.

Related Skills

Explore More Software Engineering Skills→
zinan92zinan92
1

remotion-best-practices

Establish Remotion animation workflows using timing APIs and staticFile assets.

Community
Intermediate
openaiopenai
5.3k

remotion-render

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

Official
Basic
chmonitorchmonitor
255

hyperframes-media

Generate audio, captions, and background-removed visuals for HyperFrames video compositions.

Official
Advanced
0xKobold0xKobold
4

video-frames

Extract video frames and thumbnails using an FFmpeg-based script.

Official
Intermediate