Remotion-based 비디오 프로덕션 워크플로우에 연결되는 이 repo. 그 이후로, 두 번째 접근법은 HyperFrames를 사용했습니다. 이 페이지를 사용하여 길을 선택하십시오.

---

경로 선택

Path 1 - 리 모션 (React-based)

: React로 편안하고, 성숙한 생태계를 원하거나, 팀이 이미 JavaScript 프레임 워크를 사용합니다.

비디오 제작 작업 흐름 (이 repo)

Remotion은 5년 동안 진행된 React 기반 비디오 프레임워크입니다. 그것은 큰 공동체, 우수한 문서 및 생산에 있는 입증된 궤도 기록이 있습니다. React 구성 요소로 비디오를 빌드하고 헤드리스 크롬 기반 파이프라인을 사용하여 MP4로 렌더링합니다.

Path 2 - 하이퍼프레임 (HTML 기반, 더 새로운)

: 매끄럽게 편집 경험을 원하시거나 React를 통해 HTML/CSS를 선호하거나, Solider AI-agent 통합을 원하신다면 됩니다.

미디어 제작 키트 (HyperFrames)

HyperFrames는 HeyGen의 새로운 HTML 기반 플랫폼입니다. Remotion과 유사하게 작동합니다. MP4로 렌더링하는 애니메이션 코드 파일을 작성하지만 실제 편집기 내에서 더 나은 사용자 경험을 가지고 있습니다.

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