HyperFrames Core
HyperFramesはHTMLから動画をレンダリングします。コンポジションは、data-*属性でタイミングを宣言し、アニメーションランタイムがシーク可能であり、メディア再生がフレームワークによって管理されるHTMLファイルです。
これはコンポジションコントラクト — 1つのHyperFramesプロジェクトを構築する方法です。以下の本文はビルドガイドです；トピックごとの詳細はreferences/（次にインデックス）にあり、必要に応じて読んでください。その他の関心事は、同じスキルの兄弟セクション — ../cli（開発ループ）と../registry（ブロック/コンポーネントのインストール） — および兄弟デザインスキルである/hyperframes-motion（アニメーションレシピ）と/hyperframes-design（パレット、タイポグラフィ、フレームプリセット）にあります。../SKILL.mdの機能マップは、各スキルがカバーする内容を示しています。
リファレンス
| ファイル | 読む目的… |
|---|---|
references/minimal-composition.md | 最小のレンダリング可能なコンポジションスケルトンから始める |
references/composition-patterns.md | モノリシック vs モジュラーの選択；モジュラーindex.htmlの構造化；サブコンポジションアーキタイプの選択 |
references/data-attributes.md | 任意のdata-*（ルート/クリップ/サブコンポホスト/レガシーエイリアス）を検索；class="clip"の使用 |
references/tracks-and-clips.md | data-track-indexの選択、同一トラックの重なり/z-indexの処理、別のクリップに対する相対タイミング |
references/sub-compositions.md | サブコンポジションの配線（ホスト属性、<template>、インスタンスごとの変数）とその内部でのアニメーション |
references/variables-and-media.md | 変数の宣言；ビジュアル専用再生のための<video>の配置 |
references/determinism-rules.md | シーク可能なタイムラインの構築；決定論の禁止事項；アニメーション可能プロパティの許可リスト；レイアウト/テキストフィット |
references/full-screen-motion.md | 共有背景を使用した全フレームモーションの作成 |
references/storyboard-format.md | STORYBOARD.md計画の作成（+ 解析されたマニフェスト） |
references/subagent-dispatch.md | サブエージェントディスパッチ動詞（並列ファンアウト/バックグラウンド/待機）をハーネスにマッピング |
references/tailwind.md | Tailwind v4プロジェクトでの作業（init --tailwind；ランタイムコントラクトはStudio v3とは異なります） |
アニメーションランタイムの詳細（GSAP API、Lottie、Three.jsなど）については/hyperframes-motion → adapters/<runtime>.mdを参照してください。
コンポジションの構築
2つのルート形式（互換性なし）
- スタンドアロン（トップレベル
index.html） — ルート<div data-composition-id="…">は直接<body>内に配置され、<template>ラッパーなし（ラップするとすべてのコンテンツが非表示になりレンダリングが壊れます）。 - サブコンポジション（
data-composition-src経由で読み込み） — ルートは必ず<template>でラップする必要があります。
⚠ 転送ルール：ランタイムは
<template>の内容のみをクローンします；外側のすべて（<head>のスタイル/スクリプトを含む）は破棄されます —<style>/<script>はテンプレート内部に配置してください。 ⚠ ホストIDルール：ホストスロットのdata-composition-idは、内部テンプレートのdata-composition-idおよびwindow.__timelines["<id>"]キーと完全に一致する必要があります —-mount/-slot/-hostサフィックスは付けないでください。
ファイル構造、ホスト配線、およびプリレンダーチェックリスト → references/sub-compositions.md。
ルートにはサイズ指定が必要（無音のレイアウトバグ）
スタンドアロンルートには、明示的なサイズ指定ボックス（width/heightをpxで）が必要であり、height:100%要素までのすべての祖先が解決された高さを持っている必要があります — そうしないと、flex/100%の子要素が約0に縮小し、コンテンツが左上隅に折り重なります。lint/validate/inspectはこれを検出しません。スケルトン → references/minimal-composition.md。
一時停止された1つのタイムライン
各コンポジションは、window.__timelines["<id>"]（キー = ルートdata-composition-id）に正確に1つのgsap.timeline({ paused: true })を登録し、ページ読み込み時に同期的に構築します。レンダリング期間 = ルートdata-durationであり、タイムラインの長さではありません。サブタイムラインをホストに手動でネストしないでください。完全なコントラクト（非GSAPランタイムを含む） → references/determinism-rules.md + /hyperframes-motion/adapters/。
譲れないルール（lint/validate/inspectが検出しない無音のバグ）
ここに示します；完全な根拠はリンク先のリファレンスを参照してください。違反しないでください：
- レンダリング時のクロック / 非シードの
Math.random/ ネットワーク / 入力状態の禁止；repeat: -1の禁止（有限カウントを使用）。 →determinism-rules.md - ビジュアルプロパティ許可リストのみをアニメーション化；
display/visibilityは禁止；後のシーンのクリップでgsap.setを使用しない。 →determinism-rules.md - 本文テキストに
<br>を使用しない；変形された要素はブロックレベルでサイズ指定が必要；パルスする絶対配置の装飾要素にはピーククリアランスが必要。 →determinism-rules.md <video>はホストルートの直接の子である必要があります（サブコンポ<template>/ラッパーの内部ではダメ）；フレームワークが再生を管理します。 →variables-and-media.md- すべての
idはアセンブルされたページ全体で一意である必要があります；サブコンポ内部では、IDにコンポジションIDをプレフィックスとして付けます（#<id>-hero）。重複した<video>/<img>IDは空白でレンダリングされます — プロデューサーはgetElementByIdでフレームを注入するため、ファイル間の重複はlintをすり抜けます。 →composition-patterns.md - 全画面シーンの塗りつぶしは、全幅の子要素（
position:absolute; inset:0）に配置し、コンポジションルート自体には決して配置しないでください — プロデューサーのフレーム合成でルート要素自身のbackgroundが削除される可能性があり（フレームが黒くレンダリングされる）、プレビュー/snapshotでは正しく表示されていても起こります。 →composition-patterns.md
既存のコンポジションの編集
- 最初にファイルを読んでください。無関係なタイミング、トラック、ID、変数、メディアパスを保持してください。
- 既存のコンポジションIDとタイムラインキーに一致させてください。
- クリップを追加する：重複しない
data-track-indexを選択するか、意図的に周囲のタイミングを調整してください。 - サブコンポジションを追加する：ホストを配線する前に、内部の
data-composition-idを確認してください。
バリデーション
CLIゲートを実行します（正規のlint / validate / inspect / snapshot / preview / renderチェックリストについては../cli/SKILL.md → ワークフロー + 最小完了ゲートを参照してください。サブコンポジションプロジェクトに必要なビジュアルスモークテストも含まれます）。