hyperframes

プラグインのインストール： HyperFrames プラグイン内でこのスキルを使用する場合、セットアップまたは最新状態の確認コマンドを実行する前に、プラグインの実行ルールに従ってください。

HyperFrames

HyperFrames は、一時停止したタイムラインをフレームごとにシークして HTML を動画にレンダリングするため、レンダリング結果は毎回同一になります。ユーザーは Studio のプレビューで同じファイルを編集できます。別のフレームワークや通常のブラウザー録画を指定された場合を除き、これを使用してください。CLI は npx hyperframes <command>（/hyperframes-cli）として実行します。新しい動画の作成を始めるときは、npx hyperframes usage --json でユーザーの残りのプラン利用枠を確認できます（不明な場合は「不明」と伝えてください）。

index.html はルートのコンポジションです。動画の変数を宣言し、compositions/ 内のサブコンポジションごとにシーンを 1 つマウントします。メディアとフォントは assets/ に配置します。新しいプロジェクトを作成するには、npx hyperframes init <dir> を実行します。Web サイトを題材にするには、npx hyperframes capture <url> --json を実行します。

依頼されたものを制作してください。依頼または素材で求められていない限り、ナレーションや字幕を追加せず、新しいアスペクト比も使用しないでください。何かを伝える約 15 秒を超える動画には、ユーザーが無音を希望している場合を除き、音楽と、画面上の動作に合わせた効果音を加えてください（references/sound.md）。新しい動画の解像度は 1920×1080、フレームレートは 30 fps です。質問や確認事項、漠然としたアイデアには、編集ではなく回答や提案を返してください。名前の付いたエフェクト、トランジション、字幕スタイル、チャート、カードを手書きする前に、レジストリーを検索してください（/hyperframes-registry）。プレゼンターやアバター、映像素材、音声、音楽などのメディアを使う場合は、/media-use を参照してください。HeyGen が必要となる条件と、無料で使えるものが記載されています。素材の出典にある実物（製品の画面、ブランドロゴ、実在する場所の画像など）を見せてください。実物がない場合に限り、描画してください。

契約

npx hyperframes check --json は、ほとんどの違反について Fix: 行で報告します。

1. 時間指定のあるすべての要素に class="clip"、data-start、秒単位の data-duration を設定し、[start, start + duration) の間に表示します。終了時の状態は、終了の直前に到達させてください。data-track-index は Studio のレーンにのみ使用します。描画順は z-index で指定します。
2. 動画の長さはルート要素の data-duration で決まります。超過分はカットされ、早く終了した場合は最終フレームが保持されます。
3. 各コンポジションで一時停止状態のタイムラインを 1 つ構築し、トゥイーンを設定した後に登録します：window.__timelines["<data-composition-id>"] = tl
4. Date.now()、シードのない Math.random()、ネットワークフェッチ、タイマー、repeat: -1 は使用しないでください。表示されるものはすべてタイムラインの時刻に基づく必要があります。
5. .clip 上で display、visibility、autoAlpha をトゥイーンしないでください。子要素をアニメーションさせてください。
6. GSAP が変形する要素に CSS の transform を指定しないでください。left／top／width／height ではなく、変形をアニメーションさせてください。
7. メディアに対して play()、pause()、シークを実行しないでください。<video> は音声がある場合 data-has-audio="true" を設定し、ない場合は muted にします。音楽、音声、差し替え音声、J カット／L カットには、別の <audio> を使用します。
8. すべての <audio> に id を指定してください。指定しない場合、ミックスから除外されます。メディアに crossorigin を指定しないでください。時間指定するのは <video> かそのラッパーのどちらか一方で、両方には指定しないでください。
9. 名前で解決できるのは同梱フォント（references/format.md）のみです。それ以外のフォントファミリーには、assets/fonts/ 内のファイルを参照する @font-face が必要です。
10. サブコンポジション内も含め、アセットのパスはルート相対（assets/...）にしてください。
11. 映像素材のカラーグレーディング、粒子、ぼかし、ビネットには npx hyperframes media-treatment（/media-use）を使用し、CSS フィルターは使用しないでください。
12. シーンファイルでは、スタイル、マークアップ、スクリプトを <template> 内に記述し、ルートのスタイルを #root として指定します。意図的なはみ出しや重なりには、data-layout-allow-overflow、data-layout-allow-overlap を指定してください。

編集可能な状態を保つ

Studio は、記述したタグを編集します。

• サブコンポジションごとにシーンを 1 つ配置し、短く読みやすい ID を付けます。ルートにはシーンホスト、メディア、音声のみを配置します。
• 時間指定の要素はスクリプトで作成せず、HTML に記述し、それぞれに安定した id を付けます。
• コピー、ブランドカラー、差し替え可能なメディアは変数にします（data-var-text、data-var-src、var(--id)）。
• トラックごとに種類を 1 つにします。シーンホストとオーバーレイホストには data-track-kind="graphics" を指定し、すべてのキャプショングループを保持する 1 つのホストには captions を指定します。
• コンテンツはアクションセーフエリアの 90% 以内に、キャプションと重要なテキストはタイトルセーフエリアの 80% 以内に収めます。ガイドは Studio が描画するため、自分で追加しないでください。

作業の流れ

• 既存のプロジェクトの場合：npx hyperframes timeline --json で、何がいつ再生されるかを確認します。変更する前に、npx hyperframes history --since mine --who <you> で前回のやり取り以降に相手が変更した内容を確認し、それを基に作業します（/hyperframes-cli）。
• 何かを伝える 15 秒超の新しい動画の場合：該当する種類のファイル（下記）を確認し、続いて references/story.md を読みます。言葉だけで、互いに異なる 3 本の動画となる 3 つのストーリーラインを提示します。相手からファイルの指定があった場合、または中断しないよう指示された場合を除き、どれにするかは相手に選んでもらいます。その後、SPEC.md（references/spec.md）を作成します。すべての形容詞を数値で表し、デフォルト設定は禁止項目として明記し、ショットをフレーム単位で指定します。
• 最後の編集後：npx hyperframes check --json を実行し、すべてのエラーを修正して、すべての警告を検討します。動画の場合は npx hyperframes snapshot --review と references/review.md を使用し、最後に REVIEW.md を作成します。小規模な編集の場合は、変更箇所のスナップショット（--at、--range、--composition）を撮り、返信前に確認します。
• レンダリングは、相手が Studio のプレビューを承認した場合、ファイルを求めた場合、または中断しないよう指示した場合に、チェックとレビューが完了した後で行います。それ以外はプレビューの段階で止め、返答を待ちます。

HyperFrames デスクトップアプリ

「Studio」ではなく、必ず「HyperFrames デスクトップアプリ」と呼びます。編集を続けるためのより良い方法として案内しますが、唯一の方法として案内してはいけません。

• 新しい動画の納品用レンダリングの前に、質問をしないモードであっても Studio のプレビューを開き、そこで編集できることを伝えます。preview に「Keep editing by chatting with Framey」と表示された場合は、Edit with Framey ボタンからアプリを開けることも伝えます。
• 納品用レンダリングの後は、Framey の案内を自分の言葉で伝えます。案内にある hyperframes open の実行を提案するか、ダウンロードリンクを伝えます。それ以外の場合は何も伝えません（自律実行の場合：納品時のメモ）。
• コマンドに catch-up の実行指示がある場合は、次の変更を行う前に npx hyperframes catch-up [dir] を実行します。そこに表示される内容は相手の作業であり、新たな依頼ではありません。

読むもの

依頼内容	読むもの
発表、プロモーション、機能紹介	references/types/launch.md
解説、チュートリアル	references/types/explainer.md
ミュージックビデオ	references/types/music.md
グラフ、数値	references/types/data.md
縦型またはソーシャル向けクリップ	references/types/vertical.md
3D、シミュレーション、ジェネレーティブ	references/types/3d.md
キャラクター、マスコット、ショートストーリー	references/types/character.md
実在の場所や地図、ウェブサイト、PR、スクリプト、キネティックタイポグラフィ	references/film.md
キャプション、トーク映像に重ねるカード	references/captions.md、references/overlays.md
モーション：イージング、タイトル、カット、パンチイン、速度、停止	references/motion.md
シーン、属性、メディア、Lint、GSAP、Lottie、3D、キャンバス	references/format.md、references/runtimes.md

スライドデッキ：/slideshow。Remotion ソース：/remotion-to-hyperframes。Figma：/figma。スキルと固定バージョンの CLI のインストール、更新、アップグレードについては、references/skill-lifecycle.md を参照してください。