Video Production with AI — Two Paths

This repo originally linked to a Remotion-based video production workflow. Since then, a second approach has emerged using HyperFrames — and both are worth knowing about. Use this page to pick your path.

---

Choose Your Path

Path 1 — Remotion (React-based)

Best if: You’re comfortable with React, want a mature ecosystem, or your team already uses JavaScript frameworks.

Video Production Workflow (this repo)

Remotion is a React-based video framework that’s been around for five years. It has a large community, excellent documentation, and a proven track record in production. You build videos as React components, and it renders them to MP4 using a headless Chrome-based pipeline.

Path 2 — HyperFrames (HTML-based, newer)

Best if: You want a smoother editing experience, prefer HTML/CSS over React, or want tighter AI-agent integration out of the box.

Media Production Kit (HyperFrames)

HyperFrames is a newer HTML-based platform backed by HeyGen. It works similarly to Remotion — you write animated code files that render to MP4 — but it has a better user experience within the actual editor. It’s designed from the ground up for AI-assisted video production, with a live preview studio and a library of pre-built blocks.

---

Side-by-Side Comparison

---

Which video is which?

• My original video covers the Remotion workflow (this repo).
• My latest video covers the HyperFrames workflow → Media Production Kit.

---

Remotion Skill — Full Documentation

Everything below covers the original Remotion-based workflow.

---

A portable Claude Code skill for creating branded video content with Remotion (React-based video framework), sound design, and voiceover. Captures proven patterns from production — scene templates, animation language, component architecture, and end-to-end workflow.

What’s Inside

video-production/
├── SKILL.md                        # Skill entry point
├── README.md                       # This file
└── rules/
    ├── project-setup.md            # Scaffold a new Remotion project
    ├── brand-system.md             # Define colors, gradients, typography for any brand
    ├── components.md               # 5 reusable components (Background, GradientText, etc.)