このリポジトリはもともとRemotionベースのビデオ制作ワークフローにリンクされています。 その後、HyperFramesを使って2番目のアプローチが出現し、両方を知る価値があります。 このページを使用してパスを選択します。

お問い合わせ

あなたの道を選ぶ

パス1 — リモーション(React-based)

ベスト: React と快適で、成熟したエコシステム、または既に JavaScript フレームワークを使用するチーム。

動画制作ワークフロー(このリポジトリ)

Remotion は、Remotion ベースのビデオフレームワークで、5 年間にわたっています。 大規模なコミュニティ、優れたドキュメント、および生産の実績があります。 React コンポーネントとしてビデオをビルドし、ヘッドレスの Chrome ベースのパイプラインを使用して MP4 にレンダリングします。

Path 2 — HyperFrames (HTML ベースの新しい)

ベスト: よりスムーズな編集体験をしたい、React 上で HTML/CSS を好む、またはボックスから AI-agent の統合を困難にしたい。

メディア制作キット(ハイパーフレーム)

HyperFrames は、HayGen がバックアップする新しい 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.)