remotion

name	remotion
description	Create editable AI video projects with Remotion and React, then preview and render them to MP4. Use for vertical short videos, product demos, story-driven animations, HUD/tech visuals, feed ads, tutorial videos, subtitles, voiceover, sound effects, and code-based video iteration.
version	1.0.0
author	Ekko
license	MIT
platforms	["linux","macos","windows"]
metadata	{"hermes":{"source":"skills-sh/google-labs-code/stitch-skills/remotion","tags":["remotion","react-video","ai-video","mp4","animation","short-video"]}}
prerequisites	{"commands":["node","npx"]}

Remotion

Use this skill when the user wants Hermes to turn a short video idea into an editable, renderable React video project with Remotion.

Remotion is different from prompt-only AI video tools: it produces a code project. That means the agent can repeatedly edit subtitles, timing, characters, scenes, voiceover, sound effects, and visual rhythm, then render a new MP4.

Good fits include vertical short videos, product demos, story-driven animations, HUD/tech-style videos, feed ad creatives, tutorial explainers, caption-heavy clips, and reusable video templates.

Setup

If the upstream Remotion skill is not installed, install it first:

hermes skills install skills-sh/google-labs-code/stitch-skills/remotion

For a new Remotion project, scaffold from an empty folder:

npx create-video@latest --yes --blank --no-tailwind my-video

Replace my-video with a short project name based on the user's brief.

Workflow

1. Turn the request into a concise production brief: purpose, audience, duration, aspect ratio, style, scenes, text, narration, music, sound effects, and output path.
2. Use practical defaults when the user does not specify them: 1080x1920 for vertical short video, 1920x1080 for horizontal video, 30 fps, MP4 output, and a duration that fits the requested platform.
3. Create or reuse a Remotion project.
4. Build the video as React components and Remotion compositions. Keep scene data, captions, colors, timing, and copy easy to edit.
5. Use Remotion primitives for timing and media: Composition, Sequence, AbsoluteFill, Audio, Video, Img, useCurrentFrame, useVideoConfig, interpolate, and spring.
6. Preview in Remotion Studio while iterating:

npx remotion studio

7. For non-trivial layouts, render at least one still frame to catch layout, color, and timing issues:

npx remotion still <composition-id> --scale=0.25 --frame=30

8. Render the final MP4:

npx remotion render <composition-id> out/final.mp4

Implementation Guidelines

• Prefer code that is easy to revise over one-off generated visuals.