skills.rest
yethikrishna
yethikrishnaCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

remotion

Provide best-practice guidance for authoring, animating, and rendering Remotion videos.

Updated Apr 16, 2026
Search Tags:#react#video#captions#ffmpeg#remotion#threejs#audio-visualization
One-click install
npx skills add https://github.com/yethikrishna/humble --skill remotion-yethikrishna
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/yethikrishna/humble/tree/main/core/kortix-master/opencode/skills/GENERAL-KNOWLEDGE-WORKER/remotion
Command: npx skills add https://github.com/yethikrishna/humble --skill remotion-yethikrishna

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Authors and engineers working with Remotion face many pitfalls: flickering renders, incorrectly timed animations, missing assets, mis-handled audio, and fragile composition metadata. This Skill consolidates best practices and concrete patterns to avoid rendering issues, reliably load assets, and produce production-quality videos from React components.

Core Features & Use Cases

  • Animation rules: Enforce driving all animations with useCurrentFrame and recommend spring/interpolate patterns to avoid flicker.
  • Asset and media handling: Prescribe staticFile usage for images, videos, fonts, and show Mediabunny-based helpers for duration, dimensions, and frame extraction.
  • Audio & captions: Cover audio visualization, waveform/spectrum patterns, transcribing to captions, and TikTok-style caption pages.
  • Integration & rendering: Explain FFmpeg workflows, transparent-video codecs, Lottie, Mapbox mapping, Three.js 3D usage, composition calculateMetadata, and sequencing/transition patterns.
  • Use Case: Create a parametrized Remotion composition that renders a 30-second social clip with synced captions, an audio-reactive waveform, a 3D logo reveal, and an optimized FFmpeg export.

Quick Start

Use the remotion skill to implement a Remotion composition that renders a 30-second video with captions, an audio waveform, and a 3D element while following staticFile, useCurrentFrame, and calculateMetadata best practices.

Frequently Asked Questions about remotion

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

FAQPage Schema
How do I fix flickering Remotion animations when rendering React videos?▼

To fix flickering Remotion animations, drive all visual changes with the useCurrentFrame hook and use interpolate or spring patterns to ensure deterministic frame-by-frame rendering outputs.

What is the best way to load local fonts and assets in a Remotion composition?▼

The best way to load local assets in a Remotion composition is to use the staticFile utility, which ensures images, videos, and fonts are correctly bundled and accessible during local preview and production rendering.

How do I add audio visualization and TikTok-style captions to a React video?▼

To add audio visualization and TikTok-style captions to a React video, use Remotion media utilities to generate waveforms and spectrum patterns, then sequence caption text components frame-by-frame.

Can I use Three.js and Mapbox inside a Remotion React video project?▼

Yes, you can use Three.js and Mapbox inside a Remotion project to render 3D content and interactive maps, synchronizing their animations with the timeline using useCurrentFrame.

How do I configure calculateMetadata and FFmpeg settings for Remotion production exports?▼

To configure Remotion production exports, define calculateMetadata to dynamically set composition dimensions and durations, then apply FFmpeg trimming and render settings to output the final video file.

Why does my Remotion composition fail to render missing media assets?▼

Remotion renders fail when media assets are not referenced via staticFile, causing missing file errors during the server-side rendering pipeline; ensure all audio and video paths use this helper.

Related Skills

Explore More Software Engineering Skills→
dirnbauerdirnbauer
33

remotion-best-practices

Provide best-practices guidance for Remotion video composition in React.

Community
Basic
ThejanaJayalathThejanaJayalath

video-editing

Integrate AI-driven organization with FFmpeg processing and Remotion compositions for video editing.

Community
Advanced
skills-ilskills-il
9

israeli-cyber-regulations

Map Israeli cybersecurity regulations and generate a prioritized compliance roadmap.

Official
Advanced
archibatearchibate
6

remotion

Generate React-based video compositions with Remotion and programmatic components.

Community
Advanced