hyperframes-animation

HyperFrames の作品に動きを付けるときです。動きに関する知識がすべてこの 1 件に入っています。

中身は 5 種類に分かれる

• 規則（rules）原子的な動きの定型
• 雛形（blueprints）4〜5 段階の場面のまるごとの型
• 転換（transitions）場面から場面へのつなぎ
• 技法（techniques）より広いモーションデザインの型
• 実行環境（adapters）7 つの実行環境ごとの API

既定は「規則を 2〜4 個組み合わせる」

本文の最初の指示がこれです。

既定。原子的な規則を組み合わせよ。rules-index.md から 2〜4 個選び、止まった 1 本の GSAP のタイムラインで貼り合わせて終わり。

理由も添えられています。雛形から始めるより速く、コードが少なくなる。

雛形は先回りして読まない

雛形を読むのは、上の 2 つの場面だけです。そして先回りして読むなと明記されています。必要だと決めてから読む、という指示です。

文脈の消費を意識した作りで、この群に一貫している考え方です（スキルを入れすぎて重くなる仕組み）。

実行環境が 7 つある

ここがこのスキルの厚い部分です。

• GSAP（既定）タイムライン・補間・イージング
• LottieAfter Effects からの書き出し
• Three.js3D の場面
• Anime.js軽い補間
• CSS キーフレーム素の CSS
• Web Animations APIelement.animate()
• TypeGPU / WebGPU計算パイプライン・WGSL

7 つ目まであるのは珍しいです。ただし既定は GSAP で、GSAP だけで 5 ファイルに分かれています（API・効果の定型・変形と性能・イージングと並び・タイムラインとラベル）。

どれを選んでも「巻き戻せる」ことが条件

HyperFrames は任意の時点に飛んで 1 コマずつ描き出すので、時間に沿って進むだけの動きは使えません。

既存の作品の振り付けを調べられる

同梱に scripts/animation-map.mjs があります。既に組まれた合成物の動きを一覧にする道具です。

引き継いだ作品を直すときに、どこで何が動いているかを読み解く手間が減ります。

文字の動きが 24 種ある

説明文に「24 種の名前つきの文字アニメーション」と書かれています。見出しや字幕の出し方をいちいち考えなくてよい、ということです。ただし本体は外部の animate-text スキルで、このスキルにあるのは呼び出し方の案内（adapters/animate-text.md）です。

名前で呼べるものは hyperframes-registry の側にもあるので、手で組む前に探すのが本来の順序です（入口の hyperframes がそう振り分けています）。

この公開元は入口 1 件から入る作り

4 層の構造は heygen-com/hyperframes の地図にまとめています。

合成物の構造を書くなら別物

data-* 属性・トラック・決定性は hyperframes-core の担当です。

動画を 1 本作りたいだけなら、これは入口ではない

hyperframes から入ってください。

名前のついた見た目（グリッチ、走査線、紙吹雪）は別物

そちらは hyperframes-registry で、入口の hyperframes にも「手で組む前に探せ」と書かれています。

HyperFrames 以外では使えない

「1 本の止まったタイムライン」「巻き戻せる」「決定的」という前提が、この枠組み固有です。

配色や字体の設計は扱わない

そちらは hyperframes-creative の担当です。

解析で見つかったものと同梱の数

SKILL.md の解析では、シェルコマンドの実行とパッケージの導入の記述が見つかっています。同梱ファイルは 121 件で（うち実行できるスクリプトが 6 件）、この公開元の中では多いほうです（2026-10-09 確認）。動きのぶれ（モーションブラー）の資料と、Lottie でキャラクターを歩かせる・身ぶりをさせる案内も入っています。

実際には HTML と JavaScript を書く

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

読ませ方を間違えると重くなる

実行環境を混ぜると複雑になる

7 つ用意されていますが、既定は GSAP で、本文は動きの仕事の 95% を GSAP の担当としています。1 つの合成物に複数を同居させることはでき、それぞれが決まった場所に登録して一緒に巻き戻されます。Three.js や WebGPU を使うと、描き出しの要件が変わります。WebGPU は描き出し用のブラウザの対応が要る、と同梱の adapters/typegpu.md にあります。

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

時間に沿って進むだけのものは、1 コマずつ描き出す仕組みと噛み合いません。検査で弾かれる前に、ここを意識してください。

本文が hyperframes-core の契約に上乗せする決まりは 2 つです。位置は補間の最中に getBoundingClientRect() で測らず、最初に計算して使い回す。空間の動きは x・y・scale・rotation の別名だけで、width・top などを動かさない。

ライセンス

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

雛形と規則はどちらを使えばいいですか

規則です。本文の既定が「規則を 2〜4 個組み合わせよ」で、理由も「雛形より速く、コードが少ない」と書かれています。

雛形を読むのは、4〜5 段階の複雑な振り付けが必要だと決めてからです。先回りして読むなと明記されています。

GSAP 以外も使えますか

7 つ用意されています。Lottie、Three.js、Anime.js、CSS キーフレーム、Web Animations API、TypeGPU。

ただし既定は GSAP で、文書もそこが最も厚いです。特別な理由が無ければ既定のままが無難です。

After Effects で作ったものを使えますか

Lottie の実行環境があります。書き出したファイルを読み込む経路が用意されています。

ただし巻き戻せることが条件なので、書き出し方によっては噛み合わない可能性があります。

引き継いだ作品の動きを調べられますか

調べられます。同梱の scripts/animation-map.mjs が、既存の合成物の振り付けを一覧にします。

どこで何が動いているかを読み解く手間が減ります。

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

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