Sunwood-ai-labs/hyperframes-motion-reel-skill

これは何？

主な機能

• 01120 BPM／60 FPSのグリッドに合わせたタイミングで、カット位置をビート番号で指定。
• 02Node.jsの組み込み機能だけでWAVのサウンドトラックを生成し、同じビートテーブルに同期。
• 03一時停止したGSAPタイムラインと、CanvasおよびSVG向けのシーク可能なrender(t)関数を組み合わせた2層アニメーション。
• 04クロスフェードではなく、シーン間でシェイプをモーフィング。
• 05シード付きPRNGを使い、Date.now()やMath.random()を使わない決定論的な出力。
• 06納品前にlint、check、スナップショット、ffmpegで検証。

ユースケース

• 一行のコンセプトから短いショーリールやモーションティーザーを作成。
• 16:9、9:16、1:1形式の商品ローンチ動画を制作。
• 映像を指定したBPMに合わせる、音楽主導のモーショングラフィックスを制作。
• 有料のモーションライブラリのライセンスなしで、商用利用しやすい動画コンテンツを生成。

クイックスタート

1. 1

   リポジトリをClaude Codeのskillsフォルダーにcloneして、skillをインストールします

   git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel
2. 2

   npxを含むNode.js（現行LTS）、Google Chrome、ffmpeg/ffprobeがPATH上で利用できることを確認します

3. 3

   Claude Codeで短いテーマを指定してskillを実行します

   /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

使う前に知っておきたいこと

• !Claude Codeに加えて、HyperFramesのドメインskillを別途インストールする必要があります。
• !レンダリングと検証には、Google Chromeとffmpeg/ffprobeがPATH上に必要です。

トピック

よくある質問

hyperframes-motion-reel-skill とは？

短いテーマから、HyperFramesでビート同期のモーショングラフィックス動画を作るClaude Codeスキル。 このリポジトリは、エージェントをモーションデザイナー兼クリエイティブコーダーとして動作させるClaude Codeスキルです。短いテーマと、任意の画像やボイス音源を受け取ると、世界観、コピー、デザインシステム、ビートごとのタイムラインを設計し、HTML、GSAP、SVG、Canvasでシーンを構築します。

hyperframes-motion-reel-skill は無料で使えますか？ライセンスは？

hyperframes-motion-reel-skill は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

hyperframes-motion-reel-skill は今もメンテナンスされていますか？

活発にメンテナンス中。hyperframes-motion-reel-skill の最終コミットは 2026年9月29日 です。

hyperframes-motion-reel-skill は何に使えますか？

一行のコンセプトから短いショーリールやモーションティーザーを作成。 16:9、9:16、1:1形式の商品ローンチ動画を制作。 映像を指定したBPMに合わせる、音楽主導のモーショングラフィックスを制作。 有料のモーションライブラリのライセンスなしで、商用利用しやすい動画コンテンツを生成。

hyperframes-motion-reel-skill のインストール方法は？

リポジトリをClaude Codeのskillsフォルダーにcloneして、skillをインストールします: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel npxを含むNode.js（現行LTS）、Google Chrome、ffmpeg/ffprobeがPATH上で利用できることを確認します Claude Codeで短いテーマを指定してskillを実行します: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

hyperframes-motion-reel-skill はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill