skills.rest
archibate
archibateCOMMUNITY
Explore all skills by this author →
Website𝕏@archibateGitHub

remotion

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

6|Updated Feb 25, 2026
Search Tags:#react#video#captions#audio#animation#ffmpeg#remotion
One-click install
npx skills add https://github.com/archibate/archibate-skills --skill remotion-archibate
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/archibate/archibate-skills/tree/main/skills/remotion
Command: npx skills add https://github.com/archibate/archibate-skills --skill remotion-archibate

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides comprehensive, practical guidance for building programmatic videos and animations using Remotion and React, removing ambiguity around asset loading, timing, rendering, and common media tasks so developers can produce reliable renders without frame flicker or runtime errors.

Core Features & Use Cases

  • Animation best practices: enforce useCurrentFrame-driven animations, spring/easing patterns, and sequencing to avoid flicker.
  • Media handling & tooling: guidance for importing assets with staticFile, trimming and inspecting media with FFmpeg and Mediabunny, extracting frames, and handling audio visualization and voiceover workflows.
  • Advanced integrations: patterns for Three.js 3D scenes, Mapbox animations, Lottie, captions/subtitles handling, parameterized compositions via Zod, and transparent video exports.
  • Use Case: build a captioned, parameterized marketing video that composes multiple assets, generates AI voiceover, aligns captions, and exports a production-ready file with dynamic duration.

Quick Start

Ask the agent to "Render a Remotion composition that imports public/video.mp4, loads captions from public/captions.json, uses useCurrentFrame-driven animations, and outputs a 10-second MP4."

Frequently Asked Questions about remotion

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

FAQPage Schema
How do I create programmatic videos with React?▼

Generate React-based video compositions using Remotion, assembling animations and media assets while calculating dynamic metadata and exporting the final rendered MP4 file.

How do I add captions and subtitles to a React video animation?▼

Load caption JSON files, align subtitle text display with useCurrentFrame timing, and sequence caption components within Remotion compositions to integrate subtitles into React video animations.

Can I use Three.js 3D scenes and Mapbox animations in Remotion?▼

Integrate Three.js 3D scenes and Mapbox animations into Remotion compositions to render spatial and interactive graphics within React-based programmatic video projects.

What is the best way to inspect and trim media for React video compositions?▼

Utilize FFmpeg and Mediabunny to inspect media, extract frames, trim video assets, and handle audio visualization workflows before assembling components in Remotion.

How do I avoid frame flicker and runtime errors in Remotion animations?▼

Enforce useCurrentFrame-driven animations, apply spring and easing patterns, and properly sequence Remotion components to prevent frame flicker and runtime errors during video rendering.

How do I set dynamic video duration and parameterized compositions in Remotion?▼

Utilize calculateMetadata for dynamic composition sizing and Zod schemas to parameterize Remotion compositions, enabling production-ready video exports with variable durations.

Related Skills

Explore More Software Engineering Skills→
AbdullahMalik17AbdullahMalik17
9

styling-with-shadcn

Set up shadcn/ui components, forms, and dark mode in Next.js projects.

Community
Intermediate
s1366560s1366560
5

remotion-video

Generate MP4 videos programmatically with React components and Remotion.

Community
Advanced
cliffthelincliffthelin

remotion-best-practices

Enforce frame-driven Remotion animation and asset handling best practices.

Community
Advanced
delorenjdelorenj

remotion

Create programmatic videos with React components and frame-based animations.

Community
Advanced