# Remotion

Create editable AI video projects with Remotion and React, then preview and render them...

- Repository: https://github.com/EKKOLearnAI/ekko-studio (11634 stars)
- Category: Design
- License: MIT
- Last updated: 2026-11-01
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add EKKOLearnAI/ekko-studio --skill remotion -g -a claude-code -y`
Codex: `npx skills add EKKOLearnAI/ekko-studio --skill remotion -g -a codex -y`
Cursor: `npx skills add EKKOLearnAI/ekko-studio --skill remotion -g -a cursor -y`
Gemini CLI: `npx skills add EKKOLearnAI/ekko-studio --skill remotion -g -a gemini-cli -y`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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:

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

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

```bash
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:

```bash
npx remotion studio
```

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

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

8. Render the final MP4:

The rest: https://github.com/EKKOLearnAI/ekko-studio/blob/HEAD/packages/skills/remotion/SKILL.md