hyperframes-keyframes

寄る・引く・カメラを動かす——画の中の動きを付けるときです。

対象と実装の範囲

対象が説明文に並んでいます。寄り（punch-in）と引き、ズーム、画角の取り直し、Ken Burns（静止画を動かす手法）、カメラの移動、場面をまたぐ視線の受け渡し。

実装の側も広いです。GSAP、CSS のキーフレーム、Anime.js、Web Animations API、FLIP、経路、マスク、SVG の変形と描画、文字の残像、3D の奥行き。

キーフレームの定義が 1 行で書かれている

キーフレームは姿勢の契約である。見える状態、連続した被写体の同一性、巻き戻せる実行環境、検証された画素。

「巻き戻せる」が条件に入っているのが HyperFrames 固有です。任意の時点に飛んで 1 コマずつ描き出すので、時間に沿って進むだけの動きは使えません。

担当の境界が明示されている

本文に「作り手の編集の境界」という節があります。

キーフレームが持つのは画の動きであって、クリップの組み立てではない。

切り貼りとカメラの動きが別担当なのは、知らないと迷う部分です。隣り合うクリップを置けば固い切り替えになる、交差の消し込みは別トラックの重なりと不透明度のキーフレームで作る、といった具体的な対応まで書かれています。

★できないことを表で先に言っている

ここが評価できる部分です。「作り手の依頼」と「正直な仕組み」の対応表に、未対応の項目がそのまま載っています。

「できます」と言わないスキルは信用できます。

素材の速度の扱い

素材の速度は変えられます。一定の速度（data-playback-rate）は 0.1〜10 の範囲で指定でき、途中で速度を変える指定（<video> や <audio> の data-automation に rate の線を書く。対数で補間）もあります。

寄りの作り方が具体的

• 固い寄り時間を持たない内側の包みに scale を当てる。短い補間
• 滑らかな多段の寄り被写体の包みを 1 つ生かしたまま、姿勢の段を作る
• Ken Burns包みの移動と scale を一緒に動かす
• 切り抜きでの画角変更clip-path かマスクを補間する。素材の時間は変えない

「時間の付いたクリップではなく、内側の包みを動かす」という共通の原則が全体に通っています。

入口 1 件から入る作り

この公開元は入口 1 件から入る作りです。4 層の構造は heygen-com/hyperframes の地図にまとめています。

次の 4 つの場面では、別のものを使います。

• 場面全体の方針を決める広い場面の戦略、ブランドの設計、素材の調達、字幕、一般の動画の計画は対象外
• 切り貼りだけhyperframes-core の担当
• 動きの型を探す規則と雛形は hyperframes-animation に
• HyperFrames 以外使えない

場面全体の方針を決めるとき

場面全体の方針を決めるなら別物です。説明文が「広い場面の戦略、ブランドの設計、素材の調達、字幕、一般の動画の計画には使うな」と切っています。

切り貼りだけのとき

切り貼りだけなら別物です。hyperframes-core です。

動きの型を探すとき

動きの型を探すなら別物です。規則と雛形は hyperframes-animation にあります。

HyperFrames 以外

HyperFrames 以外では使えません。

解析では何も見つかっていないが、HTML と JavaScript を書く

SKILL.md の解析では、外部通信・シェル実行・ファイル書き換えの記述は見つかっていません。同梱ファイルは 2 件です（2026-09-26 時点）。

ただし実際には HTML と JavaScript を書きます。解析が拾っていないのは、それらが表で書かれているためです（スキルを入れる前に確認すること）。

巻き戻せない動きは使えない

本文が描き出しに効く動きで禁じているのは、Date.now()・performance.now()・種の無い Math.random()・ホバーやスクロールでの起動・タイマー・終わらない繰り返しなどです。組み立てが終わる前にタイムラインを登録するのも禁止です。

描き出す前に、動きを証明する手順がある

hyperframes check（lint を含む）、hyperframes keyframes、対象を絞った --shot を 1 つ、要所の時刻の snapshot を流します。証明に失敗したら、元のキーフレームを直し、いちばん小さい診断から流し直してから描き出す、という順番です。

最後のコマも動きの一部として扱い、頼まれない限り静止の姿勢に戻さない・黒で終えない、とも書かれています。

未対応の項目を先に読む

未対応の項目を先に読んでください。任意の位置での静止、一致するコマの自動発見、顔の追跡。

依頼文でこれらを求めると、代わりの手順に回されます。

担当が分かれている

担当が分かれています。 1 つの依頼で core と このスキルと audio を同時に読む場合があります。文脈の消費は小さくありません。

ライセンス

ライセンス: Apache-2.0。再配布や商用利用の前に公開元の表記を確認してください。

素材の速度を途中で変えられますか

できます（2026 年 9 月の改訂から）。<video> や <audio> の data-automation に rate の線を書きます。時刻はクリップの中の秒、値は 0.1〜10 で、途中は対数で補間されます。一定の速度（data-playback-rate）より、こちらが優先されます。

映像の途中で止められますか

任意の位置では止められません。画の姿勢、素材の最後のコマ、完成した下位の合成物は止められます。

途中で止めたいなら、静止画を作って別のクリップとして置きます。

顔を追って画角を変えてくれますか

顔の追跡ではありません。幾何を人（またはエージェント）が書きます。

Ken Burns も同じで、包みの移動と拡大を書く形です。

切り貼りもできますか

別担当です。hyperframes-core が data-start data-duration data-media-start を持っています。

隣り合う範囲を置けば固い切り替えになります。

交差の消し込みはどうしますか

別トラックに重ねたクリップと、画の不透明度のキーフレームです。音の消し込みは hyperframes-audio の担当です。

対応しているエージェントはどれですか

Claude Code と Codex です。公開元の README が「Claude Code・Codex・Cursor で動く」と書き、Claude Code へのプラグインの入れ方と Codex への取り込み方を案内しています（2026-10-09 確認）。当サイトは公開元が明記しているものだけを「対応」として表示する方針なので、このスキルのページには両方が対応として出ます（指標の意味と限界）。