Motion Skills
← ガイド

HyperFrames と Remotion：AI で作る動画にはどちらのエンジン？

どちらも、エージェントがコードとして動画を書き、MP4 にレンダリングできます。違うのは、エージェントが書くものとライセンスです。HyperFrames は Apache 2.0 ライセンスの HTML、CSS、GSAP で、Remotion は React で書き、個人と 3 人までの企業は無料で使えます。

ライセンスと料金の詳細は、2026年10月29日に各プロジェクトのページで確認したものです。

HyperFrames

  • 書くもの： HTML、CSS、GSAP のタイムライン。エージェントがすでに流暢に書けるものです。
  • レンダリング： CLI（npx hyperframes render）がヘッドレス Chrome と FFmpeg を動かし、1 フレームずつ決定的にレンダリングします。Node.js 22 以降と FFmpeg が必要です。
  • エージェント向けの設計： check は lint、ランタイム、レイアウト、モーション、コントラストを監査し、snapshot は静止フレームを撮るので、エージェントがレンダリング前に自分の仕事を確認できます。Claude Code プラグインと単体のスキルも用意されています。
  • ライセンス： Apache 2.0、商用利用も無料。github.com/heygen-com/hyperframes

Remotion

  • 書くもの： フレームベースのフック（useCurrentFrame）を使う React コンポーネント。
  • 強み： 成熟したエコシステム。データ駆動の動画や大量のプログラム動画に強く、Lambda でのサーバーサイドレンダリングにも対応しています。
  • エージェント向け： 公式のエージェントスキル（npx remotion skills add）が、Claude Code、Codex、Cursor に正しい Remotion のコードの書き方を教えます。
  • ライセンス： 個人と 3 人までの企業は無料。4 人以上の企業には Company License が必要です。

ライセンスをひと目で

ライセンス 無料で使える人 有料になる場合
HyperFrames Apache 2.0 商用利用を含め、すべての人 エンジン自体については、なし
Remotion Remotion License 個人と 3 人までの企業 4 人以上：Remotion for Creators は 1 席あたり月 $25、Remotion for Automators はレンダリング 1 回あたり $0.01（月 $100 の最低料金あり）
Motion Canvas MIT 商用利用を含め、すべての人 ライブラリ自体については、なし

Motion Canvas の位置づけ

Motion Canvas は 3 つ目の選択肢で、考え方が異なります。「ジェネレーターを使ってアニメーションをプログラムする TypeScript ライブラリ」であり、さらにアニメーションをリアルタイムでプレビューできるエディターが付いています。各アニメーションは手で書く一連のステップで、一拍一拍を自分で制御したい解説動画に向いています。HyperFrames や Remotion のスキルのようにエージェントを前提に作られてはおらず、README にはコマンド 1 つで MP4 をレンダリングする方法が書かれていないため、動画の書き出し方はドキュメントで確認してください。

私たちが使っているもの

私たちの完全版スキルと無料の Motion Director スキルは、自前のオープンなエンジン motion-skills（mo、npx で実行）で動きます。考え方は HyperFrames と同じで、映像は HTML、CSS、GSAP で書かれ、Chrome で 1 フレームずつレンダリングして FFmpeg で書き出します。mo check はレンダリング前に、切れた文字、隠れた文字、コントラストの低い文字を見つけます。以前のモーションテンプレート（現在は作例としてサイトに残しています）は HyperFrames そのもので作られました。HTML と CSS なので読みやすく手で編集しやすく、組み込みの監査がレイアウトの問題を早めに見つけていました。

チームですでに React と Remotion を使っているなら、同じモーションの考え方がそのまま活かせます。動画を良くするのはエンジンではなく、ペース、タイポグラフィ、イージング、そして抑制といった技術です。Remotion のエージェントスキルが私たちの完全版スキルと比べて何をするかはRemotion のエージェントスキルと Motion Skills の比較を、Claude Code から使えるすべての方法はClaude Code で動画を作る方法をご覧ください。

よくある質問

HyperFrames は商用利用でも無料ですか？

はい。HyperFrames は Apache 2.0 ライセンスのオープンソースなので、エンジンにお金を払わずに仕事で使えます。Node.js 22 以降と FFmpeg が必要で、レンダリングはヘッドレス Chrome で行います。

HyperFrames と Remotion、どちらを選べばいいですか？

エージェントが HTML、CSS、GSAP を書くなら HyperFrames、チームが React で開発している、または大規模なレンダリングが必要なら Remotion です。

Remotion は無料ですか？

個人と 3 人までの企業なら無料です。4 人以上の企業には Company License が必要で、Remotion for Creators は 1 席あたり月 $25、Remotion for Automators はレンダリング 1 回あたり $0.01（月 $100 の最低料金あり）です。

Motion Canvas はどうですか？

Motion Canvas は、コードでアニメーションを作る MIT ライセンスの TypeScript ライブラリで、ライブプレビューのエディターが付いています。エージェントが書いてくれる映像より、自分で手書きする解説動画に向いています。

出典

この比較は独立したもので、HeyGen、Remotion、Motion Canvas とは関係ありません。2026年10月29日に確認しました。