Communitygithub.com

heygen-com/hyperframes

GATEWAY — 最初に読み込むこと。HyperFrames アニメーションや動画を作成する前に適用する、高レベルのモーション法則集。複数シーンの動画を、個別にアニメーションしたスライドの寄せ集めではなく、ひとつの連続したカメラ移動のように見せるためのルールを定義します。

hyperframes とは?

このスキルは、HyperFrames で複数シーンのアニメーション動画を作成する際の、すべてのモーションに適用される最上位の「運動法則(Motion Doctrine)」です。このルールに従わないと、個別に制作された各シーンで視線の勢いが途切れ、シーン間で要素が無意味に揺れ動く「失敗」が発生します。 主なルールは以下の通りです: - ベクター則:シーンAの出口の動き(軸・方向・速度)がシーンBの入口の動きと完全に一致すること。特にZ軸方向のスケール変化の符号ルール(拡大=押し出し、縮小=引き)の遵守が重要です。 - フィルムの「流れ(The Current)」:デフォルトでは左方向を基本とし、その他の方向は「予約」され、特別な意味を持ちます(上=結論、Z前方=思考の深化など)。 - キャリア:視線は抽象的なものではなく具体的なオブジェクトを追うため、カットを跨いでキャリア要素(カーソル、コンテナ、マーク等)を同じ位置・速度で受け渡す必要があります。 - 因果運動:すべての動きは直前の動作によって引き起こされ(クリック→押し込み→バネ→飛行→衝突→反動→表示)、効果と原因は同一フレームで開始します。 また、アイドル時の揺れ(呼吸、浮遊など)は禁止され、シーン間の時間は「段階的表示」「意図を持ったカメラ」「シーケンシャルUI」「アニメーションシーケンス」「カーソル主導のアクション」のいずれかのルートに割り当てる必要があります。クライマックスの前には 0.3~0.75 秒の「静止」を設け、反対方向への連続カット、原因のない方向転換などのアンチパターンも定義されています。 このスキルは、HyperFrames をサポートするすべてのプラットフォームで使用可能で、下位の技術スキル(cut-the-curve、oversized-cursor、seam-craft など)を呼び出すための「ルートマップ」として機能します。SEAM ゲートビルド検証ツール(seam-gate.mjs)が自動チェックを実行します。

対応~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/heygen-com/hyperframes/tree/HEAD/.agents/skills/motion-doctrine

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

モーション・ドクトリン(ゲートウェイ)

アニメーションを作成する前に必ずこれを読むこと。すべての継ぎ目(シーム)で何が起こるか、各シーンがどのように動作するかを決定します。テクニックスキルがそれを実装します。これらのルールは、汎用的/上位レベルのモーションガイダンスよりも優先されます。このルールが防ぐ失敗:シーンを個別に作成すると、カットごとに目の勢いが途切れ、シーンは入り口と出口の間でその場で揺れ動くだけになります。

ルートマップ

決定(本スキル)実装スキル
シーム遷移の選択+パラメータ+コードcut-the-curve §1–5(カタログ)
テキスト/要素のエントリーカスケードcut-the-curve §6(滝エントリー)
シーン内グループ位置変更(カットなし)cut-the-curve §7(ナッジカーブ)
カーソル主導のアクション/シーン開始/モーフ点火oversized-cursor
シームレンダリング機構/白フラッシュガードseam-craft
製品発表/説明/キャプション作業上位スキルの上に text-beat-economics、brand-faithful、captions-overlay を重ねる

作成順序:ベクターレジャー(ledger.json)→ そこからマスターシームをスタンプ(scripts/seam-stamp.mjs --ledger ledger.json --write index.html)→ フェーズごとに持続モーションルート → キャリアと原因 → ビルドコンポ → 確認(scripts/seam-gate.mjs)

手作業で作成するのは Tier-A のモーフ/マッチカットのみ。スタンプされたシームは設計上ゲートを通過します。


パート1 — シームの法則

ベクター則

シーンAの出口の動き方が、シーンBの入口の動き方を決定する:同じ軸、同じ方向、一致した速度、両側で動作の途中でカット。

  1. 軸 — x は x のまま、y は y のまま、Z は Z のまま。カットを跨いで軸を交換してはいけません。
  2. 方向 — 決して反転させないこと。Z 軸の場合、方向 = スケール変化の符号:拡大 = 押し出し(カメラ前進)、縮小 = 引き(カメラ後退)。後退する出口に小から大きく成長する入口で応えるのは、最も一般的な違反です。なぜなら、小から大きく成長するのはデフォルトの要素の入口だからです。
  3. 速度 — 入口の初速度 ≈ 出口の最終速度、ミラーリングされたイージングによる(出口 power4.in + 入口 power4.out、同じ距離と持続時間。入力側は想定経路の50%以上から開始)。詳細は cut-the-curve に。
  4. 位相(フェーズ) — カットは両側で動作の途中に着地する。カット前に静止状態になること、またはカット後に静止状態から開始することは、デッドビートです。

流れ(カレント)

すべてのフィルムは1つの支配的な方向を選びます(ハウスデフォルト:左)。すべての通常のシームはそれを使います。その他のベクターは予約済みです — それを使うことは何かを意味します:

ベクター意味
流れ(左)「次のビート」— 中立的な前進
上向き高揚 — 結論や披露が先行するものよりも上に上がる
Z前方(ズームスルー)同じ思考の奥深くに押し込む
Z後方(逆ズーム)到着 — より大きなものが着地する
スケールバースト(爆発)世界を去る — 表面がカメラを通過して吹き飛ぶ
  • 連続するシームを反対方向に実行してはいけません — ピンポンはエラーとして読み取られます。
  • 方向転換には目に見える原因(クリック/バウンス/衝撃)または章の区切りが必要です。

ベクターレジャー

マスタータイムラインを作成する前に書く — プロジェクトルートの ledger.json(スキーマ:references/seam-gate.md)。シームごとに1行:カット時間、出口と入口のベクター(軸+符号付き方向。Z 行はスケール符号を持つ)、セレクタ、テクニック。出口と入口は一致しなければなりません。行が一致しない場合は、イージングではなく計画を修正してください。検証ツールは、ランタイムサンプリングの前に行の整合性を静的にチェックします。

キャリア

目は抽象的なものではなく、オブジェクトを追います。最も強いシームは、一致した位置かつ速度でカットを跨いで具体的なキャリア(中継物)を受け渡します:途中のカーソル、次のレイアウトに縮小/ドッキングするコンテナ、正確なスロットに飛び込むマーク、滝カットの単語グループ。自然なキャリアがない場合、シーンの主役がそれを運びます(部分的な移動+初期フェードアウト、途中から入場)。クロスフェードは決して使わないでください — キャリアがまったくありません。

因果運動

各動作が直前の動作によって目に見えて開始されるように連鎖させます:クリック → 押し潰し → バネ解除 → 飛行 → 衝撃 → 反動 → 表示。

  • 効果は原因となるフレーム上で開始 — 同じタイムライン位置。「少し後」ではありません。
  • 反応は想定質量に比例:大きな要素はより遅く跳ね返り、小さなものは素早く弾みます。
  • 力は方向を変える許可証です。原因のない反転はピンポンです。

シームゲート(ビルドゲート — 検証ツールを実行し、終了コード0でなければシームは完了していない)

node <SKILL_DIR>/scripts/seam-stamp.mjs --ledger ledger.json --write index.html  # 生成
node <SKILL_DIR>/scripts/seam-gate.mjs  verify --ledger ledger.json --project .  # 検証

スクリプト(使用方法+レジャースキーマ:references/seam-gate.md)は、シームごとに以下を数値的に強制します:レジャー行の整合性、カット時に出口がまだ動いていること、入場が途中から(静止状態からではないこと)、計測方向=レジャー方向、入口/出口の速度一致(警告)、ゼロオーバーラップ(フレームあたり一方の側のみ表示 — カットはディゾルブではない)、Z 符号ルール(d(scale)/dt 両側で同じ符号。入力シーン自身の入場が符号競合についてスキャンされる)、および祖先スケールを含むキャリア矩形の連続性。レジャーを作成する際に各シームの真のキャリアセレクタを見つけるには seam-gate.mjs probe --t <cut> を使用してください。

スクリプトがチェックできないルール — 依然としてあなたの責任:

  1. 編集はシームを再開する。 シーンの最初/最後の約1秒に変更(新しいVOに合わせた再タイミングを含む)が加えられた場合、その境界の監査は無効になります — 検証ツールを再実行してください。
  2. オーディオが時計です。 VOの実際の単語タイムスタンプに合わせてシーンを再タイミングしてください。枠に合わせて読みを急がせてはいけません。VO再生成はそのシームを再開します。
  3. クリップゲートの落とし穴(ゼロオーバーラップ失敗の通常の原因):data-start がそのエントリートゥイーンより前にあるクリップは、初期不透明度で非表示が解除されます — 初期 autoAlpha: 0 かつ data-start = カット時間に設定し、それより前にしないでください。

パート2 — パフォーマンス(シーンはパフォーマンスを続ける)

アイドル時の揺れ禁止

アイドル時のサイン波ループ(呼吸、浮遊、ドリフト、グローパルス)は持続モーションとして禁止されています — それらは「動画が待機している」と読まれます。秒単位で時間が余っているシーンは計画のバグです:揺れではなく、ストーリーを追加してください。エントリーとエグジットの間のすべてのフェーズは、以下のルートのいずれかに属します(計画にルート名を明記してください):

ルート説明
段階的表示コンテンツを保留し、ナレーションビートで開示 — フレームは情報を獲得し続ける(2つ以上のコンテンツグループのデフォルト)
意図を持ったカメラマッピングされたスケール+パン経路:全体を確立 → 移動 → 被写体に到着
シーケンシャルUIライフプロダクトが時間とともに動作:進行状況が進む、ハイライトがステップを示す、カウントが刻む
アニメーションシーケンス要素がビートを演じる:カードがスタックにファイリングされる、アイテムがドラッグされる、結果が組み立てられる
カーソル主導のアクション特大カーソルが目をトリガーへ誘導し、そのクリックが次のビートを点火する(oversized-cursor)

テスト:任意の秒で一時停止 — 何か意味のあるものが途中にあること(着地中の表示、移動中のカメラ、ナレーションが言うことをしているUI)。

クライマックス前の静止

主要なアクションとその結果の間に 0.3~0.75秒のポーズ をスケジュール — 劇的なコンマです。アクションから結果へ直接ジャンプするシーンはそれを失います。

タイミング意図

  • 単一エントリー ≤ 約800ms。より長いビルドアップは、1つの遅い要素ではなく、複数要素のスタガー。
  • エグジット ≈ エントリーの75%。例外:cut-the-curve はこれを反転(エントリー ≈ エグジットの127%)。
  • 総スタガー ≤ 500ms。8要素以上の場合、要素ごとの遅延を短くするか、最初の数要素のみスタガー。
  • 禁止イージング:bounce.out / elastic.out。エントリーのオーバーシュート back.out(1.4–1.7) は可。
  • 類似要素は1つのイージング+持続時間意図を共有 — 要素ごとにユニークなペアは不可。

トランジション語彙

フィルムごとに2~3つのシーン間トランジションのみを使用し、繰り返す。デフォルトの境界は 流れ方向の cut-the-curve。手書きの共有要素モーフ(intent: morph)は予算にカウントされません。


アンチパターン

してはいけないこと代わりにこうする
各シーンの入場を個別に作成する最初にベクターレジャーを書く
シーン間をクロスフェードする流れ方向で cut-the-curve を使用
エグジットが完了してからシーンが変わる両側で動作の途中でカット
カット後に静止状態から入場が始まる想定経路の50%以上から入場
逆ズームエグジット → 小から大きく成長するエントリー(または押し出し → 特大の引き)スケール速度の符号を一致させる(シームゲート7)
Zシーム受け渡しの下で入力シーン独自のポップインイントロその開始フレームを構成して保持するか、符号を一致させる
時間を埋めるためのアイドル揺れ/呼吸/浮遊持続モーションルートを割り当てるか、ストーリーを追加する
原因のない方向反転力を消費するか、流れを維持する
変化のための予約ベクターの使用デフォルトで流れを使い、意味があるときに予約ベクターを使う
原因より数フレーム遅れた反応同一フレームで点火
アクションが結果に直接ジャンプクライマックス前の静止(0.3~0.75秒)をスケジュール

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

general-video

>

heygen-com/animejs

Anime.js adapter patterns for HyperFrames. Use when writing Anime.js animations or timelines inside HyperFrames compositions, registering animations on window.__hfAnime, making Anime.js seek-driven and deterministic, or translating Anime.js examples into render-safe HyperFrames HTML.

heygen-com/claude-design-hyperframes

Use when running inside Claude Design specifically. Produces a valid, brand-accurate HyperFrames video draft using pre-valid skeletons. For Claude Code / Cursor / Codex, use the `hyperframes` skill instead.

heygen-com/contribute-catalog

Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

heygen-com/css-animations

CSS animation adapter patterns for HyperFrames. Use when authoring CSS keyframes, animation-delay based timing, animation-fill-mode, animation-play-state, or CSS-only motion that HyperFrames must seek deterministically during preview and rendering.

heygen-com/gsap

GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

heygen-com/hyperframes

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

heygen-com/hyperframes

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

heygen-com/hyperframes

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

heygen-com/hyperframes

A single feature card orbits a dot sphere on approved Blender camera motion. HyperFrames block, 1920×1080, 10s, 4 variables.

heygen-com/hyperframes

A wireframe portal bursts open, the title comes through, then its letters swap into a second phrase. HyperFrames block, 1920×1080, 8s, 9 variables.

heygen-com/hyperframes

Glass shards fly in through fog and tile themselves into the headline. HyperFrames block, 1920×1080, 12.16s, 19 variables.

heygen-com/hyperframes

Render-correctness doctrine for scene-to-scene seams in HyperFrames launch videos — the prerequisites that make transitions composite correctly on the master timeline. Load when assembling the master timeline / index.html, when a white flash appears at a cut or crossfade seam (especially on dark films), when reasoning about why a transition opacity dip shows through, or when verifying the render-side mechanics of how overlapping scene wrappers blend. Covers the opaque stage-ground (#root background) white-flash guard and how the injector overlaps wrappers, holds final frames, ping-pongs tracks, and stamps lint-clean template code onto the master timeline. Does NOT contain the per-transition catalog — see the transition registry for individual transition entries.

heygen-com/hyperframes

An orbiting camera follows an ice logo as it breaks apart, reforms into two text moments, and fades. HyperFrames block, 1920×1080, 22.5s, 216 variables.

heygen-com/hyperframes

name: embedded-captions

heygen-com/hyperframes

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

heygen-com/hyperframes

Turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video: there is no site or footage to capture, so the visuals are invented per scene (typography, abstract graphics, diagrams, data-viz). Use for topic explainers, concept breakdowns, how-tos, listicles. Not a video built from a website (/product-launch-video — promo or tour). Unclear → /hyperframes.

heygen-com/hyperframes

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

heygen-com/hyperframes

House-style oversized macOS cursor technique for HyperFrames launch videos. Load whenever a scene involves cursors or a pointer-led action, when kicking off a UI scene, when igniting a morph/transition/typing run with a click, or when a scene reads as static, dead, or stale and needs a cheap high-yield source of motion to carry the viewer's eye and segment them out of the stale state. Covers cursor size/look (incl. brand-motif cursors), the off-screen entry law, tip-targeting and the click tap, click-ignites-the-next-beat, and exit / cross-scene handoff.

heygen-com/hyperframes

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

関連スキル