Remotion Video Production and Motion Design

Create, edit, and finish high-quality videos with Remotion and supporting media tools. Cover the full agent workflow: research, brief, asset inventory, storyboard, motion design, editing, captions, audio, localhost Studio preview, user review, revision, approved render, and export QA.

Optimize for clear story, strong visual hierarchy, deterministic frame-based animation, reusable design systems, licensed assets, and production-ready delivery. Do not bundle media assets with this skill; create visuals in code and use user-provided, generated, or licensed media only inside the target video project.

Operating Rules

Start by identifying whether the request is for a product demo, SaaS ad, UI walkthrough, social short, explainer, motion graphics piece, kinetic typography edit, real-footage edit, podcast clip, tutorial, trailer, 3D/data visualization, captioning job, audio mix, render, or debugging task.

For new videos or significant edits, produce a researched creative plan before implementation. Include objective, audience, platform, duration, aspect ratio, story beats, asset needs, motion language, audio plan, risks, and acceptance checks.

Gather assets before building. Inventory user-provided screenshots, recordings, footage, logos, brand files, voiceover, music, SFX, captions, fonts, and copy. If required assets are missing and cannot be safely generated or sourced, ask the user for those assets with exact filenames and target folders.

Prefer code-first visuals: React layouts, SVG, CSS drawing, Canvas/WebGL, data-driven charts, cursor simulation, captions, and procedural backgrounds. Avoid adding local media files, stock assets, sample MP3s, sample MP4s, logos, fonts, or screenshots to the skill.

Animate only with Remotion time: useCurrentFrame(), useVideoConfig(), interpolate(), Easing, spring(), Sequence, Series, and TransitionSeries. Avoid CSS transitions, CSS keyframes, Tailwind animation classes, timers, random values without random(), or browser-only playback assumptions.

Respect the existing project. Inspect package.json, src/Root.tsx, existing components, renderer config, and package manager before scaffolding. Use one package manager per project. Install only the packages needed for the requested video.