hyperframes
heygen-com · Apache-2.0 · スター60,170件HTMLを書いて動画をレンダリング。シーク可能なタイムライン、決定論的なフレーム、編集用のスタジオを備えています。MotionKitの土台となっているエンジンです。
ディレクトリ · 2026年10月10日確認
Claude CodeとCodex向けのオープンソースモーションスキル
コーディングエージェントで動画を作るのに、誰かにお金を払う必要はありません。知っておきたいオープンソースプロジェクトを、それぞれの得意分野と公開ライセンスとともに紹介します。
ここで紹介するのは、それぞれの作者による独立したプロジェクトです。MotionKitはこれらのいずれとも提携しておらず、そのコードも含んでいません。優れたプロジェクトなのでリンクを掲載しています。スター数とライセンスは2026年10月10日時点のGitHubの表示です。利用前にリポジトリで最新の情報をご確認ください。
エンジン
コードを動画に変換するレンダラーです。以下のスキルの多くは、いずれかのエンジンの上で動作します。
remotion
remotion-dev · Remotion License · スター63,004件Reactコンポーネントで動画を作成できます。独自のライセンスで、個人と小規模チームは無料、大きな企業は有料です。商用利用の前に利用条件をご確認ください。
エディトリアル風・解説動画風のルック
紙の質感、切り抜き、ドキュメンタリー風のテンポ。
vox-explainer-skill
CK42BB · MIT · スター110件1つのトピックから、エディトリアル風の解説動画を作るClaude Codeスキルです。スクリプト、キーフレーム、アニメーション、ナレーション、音楽まで生成します。
vox-style-animation
Cele-san · MIT · スター2件エディトリアル風のモーショングラフィックスを、HyperFramesのスタイルパックとしてまとめたものです。スタイルを取り込んで自分のパックを作る方法も付いています。
Leslie-vox-style.skill
Ai-Leslie · MIT · スター0件ドキュメンタリー風のストーリーテリング、エディトリアル調のコラージュ、解説動画風のモーショングラフィックス向けのCodexスキルです。
motion-skill
LunaAI519 · MIT · スター0件1枚の参考画像から、レトロなスクラップブック風のショート動画を作ります。フレームの生成には画像モデルと動画モデルを使用します。著作権のセルフチェック機能付きです。ドキュメントは中国語です。
手描き・キャラクターアニメーション
図をスケッチ風にしたいとき、キャラクターに演技をさせたいときに。
ClaudeAnimationBase
JohnHeibel · MIT · スター1,000件p5.jsで手描き風カートゥーンアニメを作るスターターキット。31種類の感情を演じ分けるキャラクターと、モデル向けのガイド付き。
HandDraw-Skill
ToBeWin · MIT · 3 starsSVG、Remotion、FFmpegで作る、決定論的な手描き動画エンジン。ホワイトボードでの解説を、一筆ずつ描いて見せます。
製品・ローンチ動画
ショットレシピ、絵コンテ、プロモーション形式。
video-shotcraft
Vincentwei1021 · Apache-2.0 · 11,138 starsClaude CodeとCodex向けに、Remotionでシネマティックな製品動画を作ります。豊富なショットレシピカードとモーションプレビューを収録。
make-awesome-video
NewTurn2017 · MIT · 4 starsローンチ動画のためのディレクションワークフロー。参考動画の分析、3パターンの絵コンテ作成、静止画の生成、レンダリング、ディレクターノートの提示まで進めます。
brewreel
Finderchangchang · Apache-2.0 · 161 stars製品の概要書から縦型のプロモーション動画を作成。低コストなモデルでも動作するよう設計されています。業種別のレシピと広告関連法のチェック付き。ドキュメントは中国語です。
html-animation
acelera-agency · MIT · 9 starsフレーム単位で正確なアニメーションロゴ、キネティックタイポグラフィ、ブランド動画を1つのHTMLファイルで作り、動画として書き出します。
原則と構成要素
特定のスタイルではなく、どんなスタイルでも動きを良くするための知識です。
motion-design-skill
LottieFiles · MIT · 2,075 starsAIエージェント向けにまとめたモーションデザインの原則。タイミング、イージング、コレオグラフィ、そしてアニメーションの基本原則をインターフェース向けに応用しています。
skills
VideoZero · Apache-2.0 · 73 starsMotion Canvasをベースに、図解スタイルの構造化された動画を生成するスキル集。
選び方
- 特定のスタイルにしたい方は?まずは、エディトリアル系か手描き系のスタイルスキルから始めましょう。
- 制作の基本を理解したい方は?まずモーションデザイン原則のスキルを読んでください。ほかのすべてが良くなります。
- 自分で作りたい方は?エンジンを選びましょう。HyperFramesはシンプルなHTMLでApache-2.0、RemotionはReactベースで独自のライセンスです。
MotionKit の位置づけ
MotionKitは、HyperFrames上で使える有料パックです。対象はオープンソースでは無料で得られない部分で、完成済みの24スタイル(それぞれに完全なサンプル付き)、同じコンテンツから作れるインタラクティブなデッキとPowerPoint、ナレーションのクレジット、ホスト型の共有リンクが含まれます。上記の無料プロジェクトで足りるなら、そちらをお使いください。
ここに載せるべきプロジェクトをご存じですか？ support@motionforclaude.com までメールをお送りください。