remotion-video-composition

What it does

It directs an agent to manage a production workflow for assembling generated or sourced media into Remotion/React videos. The agent should treat Remotion as the deterministic engine around media, handling planning, building, rendering, reviewing, variant rendering, and handoff with attention to media custody, captions, audio, animation, accessibility, provenance, QA, and delivery requirements.

How it works

The skill outlines a production-oriented project structure and workflow including:

• Use when Remotion is the composition layer for a real video deliverable (examples: explainers, product videos, social variants, data-driven videos, captioned narrations).
• Create a project architecture mirroring a production contract with folders like public/assets, provenance, review, renders, handoff, and a src tree containing Root.tsx, compositions, scenes, components, data, styles, utils.
• Register compositions with explicit properties (durationInFrames, fps, width, height) using Remotion components like <Composition> and <Sequence>, and derive metadata via calculateMetadata.
• Define canonical aspect ratio targets (landscape, vertical, square/portrait) and enforce safe areas for text and logos.
• Freeze inputs, capture asset custody details (IDs, paths, checksums, licenses, provenance, C2PA/Content Credentials) and use Remotion staticFile() for public assets.
• Provide options for captions (SRT/WebVTT sidecars or burned-in) with WCAG-guided timing and transcription workflow.
• Plan and manage audio as stems, with timeline-aligned mixing, using <Sequence> and volume controls, ensuring intelligibility and compliance with loudness guidance.
• Model deterministic animation using useCurrentFrame(), useVideoConfig(), spring(), interpolate(), and deterministic randomness.
• Manage data-driven variants via JSON-serializable props and Zod schemas, and derive durations from data when needed.
• Outline a data-driven variant workflow including stable IDs, asset IDs, and provenance in a render/handoff pipeline.

When to use it

Use when you require a production-grade Remotion workflow that ensures reproducible video packaging, asset custody, captions, accessibility, and provenance for a deliverable where media may come from generation or sourcing, and where final handoffs must carry render notes, provenance, and caption/asset metadata. Escalate decisions around licensing, rights, and compliant metadata when there are platform or legal constraints, or when provenance and Content Credentials are required.

What it can touch

The skill specifies tools: claude-code, codex, copilot, cursor. It references Remotion APIs (Composition, Sequence, useCurrentFrame, useVideoConfig), FFmpeg for media processing, W3C WCAG guidance, WebVTT/SRT captions, and assets under public/ with staticFile(). It requires and scripts assets organization, captions workflows, and provenance handling as described in the intake contract and project architecture sections.

Caveats

Volatile facts include Remotion package versions, API availability, licensing and pricing, cloud render limits, browser renderer status, and platform-specific delivery specs; these must be re-checked at production time with a documented verification date. The workflow emphasizes strict adherence to the production contract before coding and flags high-stakes scenarios (legal rights, C2PA signing, provenance, and accessibility obligations) for escalation.