skills.rest
zhizhunbao
zhizhunbaoCOMMUNITY
Explore all skills by this author →
GitHub

remotion-best-practices

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

1|2|Updated Mar 5, 2026
Search Tags:#react#animation#video generation#transitions#remotion#compositions#programmatic video
One-click install
npx skills add https://github.com/zhizhunbao/textbook-rag --skill remotion-best-practices-zhizhunbao
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion-best-practices
Source: https://github.com/zhizhunbao/textbook-rag/tree/main/.agent/skills/remotion
Command: npx skills add https://github.com/zhizhunbao/textbook-rag --skill remotion-best-practices-zhizhunbao

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires remotion, @remotion/media, @remotion/transitions, @remotion/captions, and includes references (resource) components.

What problem does it solve? Writing Remotion video code requires framework-specific knowledge—CSS animations do not render, timing must be frame-based, and media, captions, and transitions each follow distinct APIs. This Skill supplies the correct patterns so generated Remotion code renders correctly the first time. ## Core Features & Use Cases - Animation & Timing: Animate properties with useCurrentFrame, interpolate, Easing.bezier curves, and springs instead of forbidden CSS transitions. - Media & Sequencing: Add images, video, and audio via staticFile and @remotion/media components, and control timing with Sequence, Series, and TransitionSeries. - Dynamic Compositions: Define compositions with defaultProps, folders, stills, and calculateMetadata for data-driven duration, dimensions, and props. - Use Case: Ask the AI to build a 30-second product promo video with a typewriter title, background music, scene transitions, and captions, and receive working Remotion code scaffolded with create-video. ## Quick Start Create a Remotion video project and build an animated composition with a fade-in title and background music.

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 programmatically with React?▼

Use Remotion to define a Composition with a React component, width, height, fps, and durationInFrames. Scaffold a project with npx create-video@latest, then preview it with npx remotion studio.

How do I animate elements in Remotion?▼

Animate with useCurrentFrame and interpolate over an explicit frame range, adding Easing.bezier for custom timing curves. CSS transitions and Tailwind animation classes are forbidden because they do not render correctly.

How do I add audio or video to a Remotion composition?▼

Use the Audio and Video components from @remotion/media with staticFile for files in the public folder, or pass remote URLs directly. Audio supports trimming, volume callbacks, playbackRate, looping, and pitch via toneFrequency.

Can I use CSS animations or Tailwind animation classes in Remotion?▼

No. CSS transitions, CSS animations, and Tailwind animation class names do not render correctly in Remotion. All motion must be driven by frame-based interpolation or springs.

How do I make a Remotion video's duration dynamic based on data?▼

Pass a calculateMetadata function to the Composition. It can fetch data asynchronously and return durationInFrames, width, height, fps, and updated props before rendering begins.

How do scene transitions work in Remotion?▼

Use TransitionSeries from @remotion/transitions with presentations like fade, slide, wipe, flip, or clockWipe. Transitions overlap adjacent scenes, so total duration equals the sum of scene durations minus each transition's duration.

Related Skills

Explore More Software Engineering Skills→
sunzcdevsunzcdev

remotion-best-practices

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

Community
Intermediate
antonyfmunozantonyfmunoz

remotion

Render React components frame-by-frame into video outputs via Remotion CLI.

Community
Intermediate
calesthiocalesthio
55.1k

doubao-tts

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

Community
Intermediate
barefootfordbarefootford
589

cut

Builds video edit timelines from processed footage libraries and exports them to NLE editors.

Community
Advanced