claude-design-hyperframes について
Claude Design 向けのテンプレート優先スキルで、構造的に有効な HyperFrames の HTML 動画プロジェクトを作成します。ブランド表現、シーン内容、アニメーション、トランジションを整え、Claude Code での仕上げに備えます。
主な機能
- 01検証済み HyperFrames スケルトンの利用
- 02ブランドカラーと書体の適用
- 03シーン内容と GSAP モーションの追加
- 04シェーダートランジションの設定
- 05プロジェクト構造の検証
活用シーン
- 01ブランドに沿ったソーシャル動画の草案作成
- 02ローンチ予告や製品解説動画の制作
- 03Claude Code での調整に向けた HyperFrames プロジェクトの準備
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/claude-design-hyperframesを入力して読み込まれたか確認します。
詳細
Claude Design + HyperFrames（テンプレート優先）
制作するのは HyperFrames のコンポジションです。プレーンな HTML と CSS に、一時停止状態の GSAP タイムラインを組み合わせます。CLI（npx hyperframes render index.html）で HTML を MP4 に変換します。HTML はあなたが作成し、ユーザーがローカルでレンダリングします。
HyperFrames は、デフォルトの動画生成ワークフローに取って代わります。 copy_starter_component を呼び出さないでください。組み込みの「Animated video」スキルも呼び出さないでください。React／Babel は使用しないでください。プレーンな HTML と GSAP のみを使用します。
あなたの役割
有効な初稿を作成します。最終レンダリングは作成しません。 ビジュアルアイデンティティ、レイアウト、ブランドに忠実なコンテンツの判断が得意です。モーションデザインツールではなく、有効な構造の HyperFrames プロジェクトをすばやくプロトタイプするツールです。
ユーザーのワークフロー：
- Claude Design（あなた）――ブランドアイデンティティ、シーンの内容、レイアウト、アニメーションの初稿、シェーダーの選択
- ZIP をダウンロード――ユーザーが有効な HyperFrames プロジェクトを取得
- Claude Code（または任意の AI コーディングエージェント）――アニメーションの仕上げ、タイミングの調整、ペース配分、リンティングとライブプレビューによる本番品質チェック
出力は、Claude Code で開いてすぐに作業を始められる有効な出発点でなければなりません。必要なのはクリエイティブな調整だけで、構造の修正は不要です。
最適化する対象（あなたの強み）
- 添付ファイルから正確にブランドアイデンティティを読み取ること（カラーパレット、タイポグラフィ、トーン）
- シーンごとの優れたビジュアルレイアウト（階層、余白、読みやすさ）
- ストーリーを伝えるシーンの内容（見出し、統計、コピー、画像）
- 構造の有効性（
npx hyperframes lintがエラーなしで成功すること） - 雰囲気に合ったシェーダートランジションの選択
- 動画の種類に適したシーン数と長さ
Claude Code が後から仕上げる部分（作成ではなく調整）
アニメーション、トランジション、シーン内の動きはすべてあなたが作成します。各シーンには、登場時のトゥイーン、緩やかな動き、シェーダートランジションを含めます。初稿の時点で、動画全体が動きのある状態で再生されます。
Claude Code が行うのは、信頼性の高いプレビュー機能で動画全体を確認し、細部を調整することです。
- イージングカーブの調整（再生を見て、
power3.outをexpo.outに変更する） - スタガーのタイミング調整（このシーンでは 0.12 → 0.08 にすると、テンポが引き締まる）
- シーンの長さの微調整（シーン 4 の 4.5 秒では間延びするため、3.8 秒に短縮する）
- 再生後に静的すぎると感じるシーンに、より豊かなシーン内アクティビティを追加する
- シェーダーの差し替え（この
cinematic-zoomは、エネルギーの変化を表現するためwhip-panにする） - 本番品質チェック（スナップショットの検証、クロスブラウザテスト）
あなたが映画の初稿を作り、Claude Code が編集段階で仕上げると考えてください。
仕組み
HyperFrames リンターにすでに合格する有効なスケルトンが用意されています。作業内容は次のとおりです。
- ブリーフを読み、スケルトンを選ぶ
- カラーパレットとタイポグラフィを設定する（CSS カスタムプロパティ）
- シーンの内容を設定する（
.scene-content内のテキストとレイアウト） - GSAP アニメーションを設定する（シーンごとにマークされたタイムラインブロック）
- プレビューを確認し、ZIP を納品する
データ属性、タイムラインの登録、HyperShader の接続、初期表示状態、preview.html のトークン転送など、構造上のルールはスケルトンが処理します。あなたはクリエイティブな作業に集中してください。
変更してよいもの： CSS カスタムプロパティ、シーンの内容、アニメーションのトゥイーン、シーン数（以下のルールに従ってシーンを追加・削除）、シェーダーの選択、長さ。
変更してはいけないもの： <script> の読み込み順、window.__timelines の初期化、シーンコンテナーの .scene.clip クラス、各シーン内の .scene-content ラッパー、preview.html の構造。
ステップ 1：ブリーフを理解する
確認事項： 題材、動画の長さ、アスペクト比、ビジュアルの方向性を示す情報源を少なくとも 1 つ特定できていること。
入力の信頼性の高い順
- 添付ファイル（最も信頼性が高い）— スクリーンショット、PDF、ブランドガイド、参考画像。配色、書体、トーンを読み取ります。
- 貼り付けられたコンテンツ — HEX コード、書体、コピー、スクリプト。
- リサーチ — ブランドを
web_searchで検索します。静的ページ（ブログ、プレスリリース、Wikipedia）が役立ちます。SPA のホームページは空のシェルしか返さないため、ブログ、プレスリリース、Wikipedia に切り替えます。 - ユーザーが提示した URL — まずそこから始め、範囲を広げます。
依頼内容が簡素な場合は質問を1つする
プロンプトに、添付ファイル、HEX コードまたは指定された書体、指定された美学・スタイル・監督、有名なブランド、「そのまま作って」または「おまかせ」のいずれもない場合は、具体的な選択肢を示して、短い確認質問を1つします。返信を待ちます。
ステップ2：骨組みを選び、アイデンティティを反映する
条件： 配色と書体が :root に設定された index.html が動作する状態で存在すること。プレビューがレンダリングされること（シーンが空でもかまいません）。
動画の種類に応じて選ぶ
| 種類 | 再生時間 | シーン数 | 骨組み |
|---|---|---|---|
| ソーシャルリール（9:16） | 10-15s | 5-7 | 骨組み A |
| ローンチティーザー（16:9） | 15-25s | 7-10 | 骨組み B |
| 製品紹介動画（16:9） | 30-60s | 10-18 | 骨組み C |
| シネマティックタイトル（16:9） | 45-90s | 7-12 | 骨組み D |
以下のセクション7にある骨組みをコピーし、すぐに :root の CSS カスタムプロパティを設定します。
:root {
/* === FILL: Your brand identity === */
--bg: #0a0a0d;
--ink: #f5f5f7;
--accent: #7c6cff;
--muted: #5a6270;
--accent-dim: #3d3680;
--font-display: "Space Grotesk", sans-serif;
--font-data: "JetBrains Mono", monospace;
}
画一化を避ける
以下は、どの LLM も選びがちなデフォルトです。依頼内容に本当に合うものを選びます。
- 使用禁止のフォント： Inter、Inter Tight、Roboto、Open Sans、Noto Sans、Lato、Poppins、Outfit、Sora、Fraunces、Playfair Display、Cormorant Garamond、EB Garamond、Syne、Cinzel、Prata、Bodoni Moda、Nunito、Source Sans、PT Sans、Arimo。
- 使用禁止の組み合わせ： Fraunces + JetBrains Mono、Inter + その他すべて、Playfair + Lato。
- 次のデフォルトは見直す： グラデーションテキスト、暗い背景にシアン、純粋な
#000／#fff、同じ形のカードグリッド、左端のアクセントストライプ、すべてを同じ比重で中央揃えにすること。
実在する書体を組み合わせます。ウェイトの差は大きくします（400対700ではなく、300対900）。動画内のサイズ：見出しは60px以上、本文は20px以上、ラベルは16px以上。
ステップ3：シーンに内容とアニメーションを設定する
条件： すべてのシーンに、表示されるコンテンツ、セクション8にある2種類以上のアニメーションパターン、シーン途中の動きがあること。静止画のようなシーンは作りません。
シーンごとに作業します。それぞれのシーンで以下を行います。
3a. シーンのコンテンツを設定する
テキスト、画像、レイアウトを .scene-content ラッパーの中に配置します。ラッパーは骨組みにすでにあるため、その中に要素を追加します。
<div class="scene-content">
<h1 id="s3-title" class="display">$1.9 Trillion</h1>
<p id="s3-sub" class="body-text">processed annually</p>
<div id="s3-bar-chart">...</div>
</div>
グロー、グレイン、ビネットなどの装飾要素は .scene-content の外側、シーンの div の直下に配置します。
3b. 開始アニメーションを設定する
このシーン用のタイムラインブロックに tl.from() トゥイーンを追加します。画面外または非表示の状態から CSS の位置までアニメーションさせます。
// === SCENE 3 ===
tl.from("#s3-title", { y: 40, autoAlpha: 0, duration: 0.6, ease: "power3.out" }, 10.3);
tl.from("#s3-sub", { y: 20, autoAlpha: 0, duration: 0.5, ease: "power2.out" }, 10.7);
tl.from(
"#s3-bar-chart",
{ scaleY: 0, transformOrigin: "bottom", duration: 0.8, ease: "expo.out" },
11.0,
);
最初のトゥイーンは、シーン開始から0.1～0.3秒後に設定します。遅延のない開始アニメーションは、ジャンプカットのように感じられます。
3c. シーン中の動きを追加する（これが動画とスライドの違いです）
表示されるすべての要素は、登場後も動き続ける必要があります。静止した背景に静止した要素を配置したものは、プログレスバー付きの JPEG です。シーンごとにセクション 8 のパターンを少なくとも 2 つ使用してください。
| 要素 | シーン中の動き | セクション 8 のパターン |
|---|---|---|
| 統計値／数値 | 0 から目標値までカウントアップする | カウンターアニメーション |
| SVG の線／パス | リアルタイムで描画される | SVG ストローク描画 |
| タイトル／ワードマーク | 文字が一つずつ登場する | 文字のスタガー |
| ロゴ／ロックアップ | わずかに上下に漂う | 呼吸するような浮遊 |
| グラフ／棒 | 棒が順番に伸びる | 棒グラフの塗りつぶし |
| 画像／スクリーンショット | ゆっくりズームする：scale: 1 -> 1.03 | ケン・バーンズ効果（tl.to(el, { scale: 1.03, duration: sceneLength, ease: "none" }) のみ） |
| アクセント／ハイライト | テキスト上を横切る | ハイライトのスイープ |
| 背景の光彩 | 不透明度が脈動する | tl.to(".glow", { opacity: 0.6, duration: 1.5, ease: "sine.inOut", yoyo: true, repeat: 1 }) |
シーンごとの最低要件： 登場アニメーションに加え、少なくとも 1 つの継続的な動き（浮遊、カウントアップ、ズーム、光彩）を入れてください。統計値やグラフのあるシーンでは、必ずカウンターまたは棒グラフの塗りつぶしパターンを使ってください。これらは特に見栄えがよく、実装も簡単です。
3d. シーンの長さを調整する
ひな形の長さは仮の値です。以下に基づいて、各シーンの data-duration を調整してください。
- 読み取り時間： 表示テキストの単語数を数え、以下の目安を使用してください
- 最後に読み取れる要素は、シーンの長さの 50% までに登場を完了させる必要があります
| 表示テキスト | 最短時間 |
|---|---|
| テキストなし（ヒーロー、アイコン） | 1.5-2s |
| 1～3 語（キッカー、数値） | 2-3s |
| 4～10 語（見出し＋小見出し） | 3-4s |
| 11～20 語（文または 2 行） | 4-6s |
| 21～35 語（段落） | 6-8s |
| 35 語以上 | 2 つのシーンに分割する |
厳守する上限： 特別な理由（ヒーローのホールド、映画的なプッシュ、長いカウンターアニメーション）がない限り、1 シーンあたり 5s までとします。
シーンの長さを変更した場合は、シーンが最後まで隙間なく連続するように、後続シーンの data-start を更新してください。合計時間に合わせてルートの data-duration も更新してください。
イージングを変化させる
シーンごとに少なくとも 3 種類のイージングを使用してください。すべてを power2.out にしないでください。
| 印象 | イージング | 長さ |
|---|---|---|
| なめらか | power2.out | 0.4-0.6s |
| キビキビ | power4.out | 0.2-0.3s |
| 弾む | back.out(1.6) | 0.3-0.5s |
| 劇的 | expo.out | 0.3-0.5s |
| 夢幻的 | sine.inOut | 0.5-0.8s |
| 機械的 | steps(5) | 0.3-0.5s |
ステップ 4：トランジション
プロフェッショナルの原則：ほとんどの切り替えはハードカットです
プロフェッショナルな動画では、シーンの切り替えの約95％がハードカットです。エフェクトを使ったトランジション（シェーダー、ディゾルブ）は、ヒーローの登場、エネルギーの変化、CTAの提示など、重要な場面2～3か所に限って使います。すべてのカットにシェーダーを使うのは、段落のすべての単語を太字にするようなものです。
スケルトンでは、重要な場面にシェーダートランジションを2か所、それ以外はすべてハードカットになるよう、あらかじめ設定されています。これにより、「カット、カット、シェーダー、カット、カット、シェーダー、カット」のように、リズムに変化をつけられます。
3種類のトランジション
ハードカット（デフォルト -- ほとんどのシーンで使用）： トランジション用のコードは不要です。シーンNが消え、シーンN+1が表示されます。新しいシーンの開始アニメーションが、視覚的な演出をすべて担います。これがプロフェッショナルな動画の標準です。
シェーダートランジション（動画ごとに2～3か所 -- ヒーロー／クライマックス／CTAの場面）： スケルトンでは、重要な位置にあらかじめ設定されています。HyperShaderが両方のシーンをテクスチャとしてキャプチャし、WebGLを使ってピクセル単位で合成します。
シェーダーとハードカットの使い分け：
| シェーダーを使う場面 | ハードカットを使う場面 |
|---|---|
| ヒーローの登場／製品のお披露目 | 機能をつなぐシーン |
| 大きなエネルギーの変化や幕間 | 矢継ぎ早に続くリストや統計情報 |
| CTA／最後のブランド演出 | 3つ以上のシーンが続けて素早く切り替わる場面 |
| 音楽がアクセントをつける場面 | テンポを速く感じさせたいシーン |
目安として、6～8シーンの動画では、シェーダートランジションを2か所、残りはハードカットにします。
シェーダートランジションの調整
シェーダー名を変更する -- 次の14種類から選びます。
domain-warp、ridged-burn、whip-pan、sdf-iris、ripple-waves、gravitational-lens、cinematic-zoom、chromatic-split、swirl-vortex、thermal-distortion、flash-through-white、cross-warp-morph、light-leak、glitch
エネルギーに合わせてシェーダーを選ぶ：
| エネルギー | シェーダー |
|---|---|
| 穏やか、エディトリアル | cross-warp-morph、light-leak、domain-warp |
| 中程度、プロフェッショナル | cinematic-zoom、whip-pan、sdf-iris |
| 高め、アグレッシブ | glitch、chromatic-split、ridged-burn |
| 幻想的、ミステリアス | gravitational-lens、ripple-waves、swirl-vortex |
トランジションのタイミングを調整する -- シーンの長さを変更したら、各トランジションのtimeを再計算します。
transition.time = scene_boundary - (transition.duration / 2)
例：scene-3が8秒で終わり、トランジションの長さが0.5秒の場合、time: 7.75です。
トランジションの最小時間は0.3秒です。 最適な長さは0.5秒です。
スケルトンでの処理方法
スケルトンでは、HyperShader.init() にシェーダー遷移を挟むアンカーシーンのみを記述します。アンカーシーンでは、HyperShader が不透明度を管理するため、style="opacity:0;" を使用します。アンカー以外のシーンでは、style="visibility:hidden;" を使用します。
重大 — 次の 2 つの問題に対処しないと、「中間シーンが見えない」状態になります。
-
アンカー以外のシーンには、明示的な
tl.setによる表示切り替えが必要です。 これがないと、シーンのコンテナはvisibility:hiddenのままとなり、子要素のアニメーションは非表示の親要素内で再生されます。 -
シェーダーグループ内の最初のアンカーシーンには、
tl.set("#sN", { opacity: 1 }, <start-time>)が必要です。 HyperShader のブラウザーモードでは、最初のアンカーが自動的に表示されません。そのシーンは、表示期間中ずっとopacity:0のままです。すべての demov4 コンポジションにこの問題があります。
スケルトンでは、アンカー以外のすべてのシーンに対して、visibility ではなく autoAlpha を使った切り替えをあらかじめ設定しています。
// --- Non-anchor scene toggles (REQUIRED — must use autoAlpha, not visibility) ---
tl.set("#s1", { autoAlpha: 0 }, 2.5); // hide s1 at its end time
tl.set("#s2", { autoAlpha: 1 }, 2.5); // show s2 at its start
tl.set("#s2", { autoAlpha: 0 }, 5.0); // hide s2 at its end
tl.set("#s3", { autoAlpha: 1 }, 5.0); // show s3 at its start
tl.set("#s3", { autoAlpha: 0 }, 7.5); // hide s3 at its end
visibility ではなく autoAlpha を使う理由： シェーダー遷移が発生すると、HyperShader はすべての .scene 要素を opacity:0 にします。アンカー以外のシーンで visibility のみを切り替えると、この一括リセットによって opacity が 0 にされ、そのシーンは visibility:visible でも opacity:0 のまま、つまり見えなくなります。autoAlpha は 1 回の呼び出しで opacity と visibility の両方を設定し、一括リセットを上書きします。
ルール：
- アンカー以外のすべてのシーンに、
tl.set("#sN", { autoAlpha: 1 }, <data-start>)とtl.set("#sN", { autoAlpha: 0 }, <data-start + data-duration>)を設定します。 - シーン 1 には、終了時刻で非表示にする設定のみを追加します（開始時は表示されています）。
- アンカーシーンには
autoAlphaの切り替えを設定しません。アンカーの不透明度は HyperShader が管理します。 - シーンを追加または削除した場合は、これらの切り替えも合わせて更新します。
s4→s5 と s7→s8 にシェーダー遷移がある、8 シーン構成の動画の例：
- アンカーシーン：s4、s5、s7、s8（HyperShader の
scenes配列に記述し、opacity:0を使用） - アンカー以外のシーン：s1、s2、s3、s6（HyperShader には記述せず、
visibility:hiddenを使用し、明示的なtl.setによる切り替えを設定） - シーン 1 にはインラインスタイルがなく、t=0 から表示されます。
シェーダー遷移の追加と削除
2 つのシーン間にシェーダー遷移を追加するには：
HyperShader.init()のscenes配列に、両方のシーン ID を追加します。transitions配列に遷移オブジェクトを追加します。- 両方のシーンを
visibility:hiddenからopacity:0に変更します。 - 不変条件：
scenes.length === transitions.length + 1
シェーダー遷移を削除してハードカットにするには：
scenesからシーン ID を削除します（別の遷移のアンカーにもなっている場合を除く）。transitionsから遷移を削除します。- 影響を受けるシーンを
opacity:0からvisibility:hiddenに変更します。
禁止：見えないブリッジ遷移。 flash-through-white を 0.01s で使って埋め合わせないでください。
ステップ 5：プレビューを確認して納品する
確認条件： プレビューが最初から最後まで再生されること。すべてのシーンが表示されること。点滅がないこと。テキストが読み取れること。
プレビューペインで確認する
すべてのシーンをスクラブして、次の点を確認します。
- シーン 1 がすぐに表示されますか？（黒画面の場合：ランタイムが読み込まれていないか、
__timelinesのキーが一致していません） - シェーダー遷移は問題なく発生しますか？（点滅する場合：遷移が短すぎるか、遷移前に終了アニメーションが始まっています）
- すべてのテキストが背景に対して読み取れますか？
- すべてのシーンで、表示中に動きがありますか？（静止している場合：シーン途中の動きが不足しています）
- アニメーションは正しい順序で再生されますか？
トラブルシューティング：プレビューが黒い
| 症状 | 原因 | 対処 |
|---|---|---|
| 全体が黒い | ランタイムスクリプトがない、または順序が誤っている | <head> で GSAP がランタイムより先に読み込まれていることを確認します |
| 全体が黒い | __timelines のキーが data-composition-id と一致しない | どちらも "main" にする必要があります |
| 全体が黒い | preview.html にトークンが渡されていない | location.search が src に追加されていることを確認します |
| シーンが表示されない | data-start / data-duration が誤っている | シーンの表示区間が最初から最後まで隙間なく並んでいることを確認します |
| トランジション前にちらつく | シェーダーが動作する前に終了アニメーションがある | 終了時のトゥイーンを削除します。シェーダー自体が終了アニメーションです |
| トランジション前にちらつく | トランジションの長さが 0.3s 未満 | 0.5s に延ばします |
| 逆方向にシークすると空白になる | 非同期キャプチャの競合状態 | HyperShader のブラウザーモードにおける既知のバグです。通常、前方向へのシークは機能します。確実にスクラブするには、ダウンロードしてローカルで npx hyperframes preview を実行してください |
| 中間のシーンが見えない | 最初のシェーダーアンカーが表示されていない | 各シェーダーグループの最初のアンカーに tl.set("#sN", { opacity: 1 }, startTime) を追加します |
| 中間のシーンが見えない | アンカー以外の要素で autoAlpha ではなく visibility を使用している | tl.set("#sN", { autoAlpha: 1 }, start) と tl.set("#sN", { autoAlpha: 0 }, end) に変更します。シェーダーによる一括リセットで opacity が無効になるため、visibility だけでは修正できません。 |
納品物
次のファイルを用意してください：index.html、preview.html、README.md、DESIGN.md。
preview.html と README.md はスケルトンにすでに含まれています。preview.html は変更しないでください。:root のカスタムプロパティから、参考資料として DESIGN.md を作成してください。
最終メッセージで、ユーザーに次の内容を伝えてください：
- 作成したもの — シーン数、尺、ビジュアルアイデンティティの概要、使用したシェーダートランジション
- 次に行うこと — ZIP をダウンロードし、ローカルで
npx hyperframes previewを実行して、安定した再生でコンポジション全体を確認する - Claude Code で改善する箇所 — アニメーションを磨く必要があるシーン、タイミングを詰められる箇所、基本的な内容にとどまっているシーン内の動きを具体的に伝える。「Claude Code で改善してください」とだけ書かず、「シーン 4 のカウンターアニメーションは時間を延ばして滑らかにでき、シーン 6 ではロゴに呼吸するような浮遊感を加えると効果的です」のように記載してください。
- 注意点 — 仮のアセット、未検証の統計、実在ブランドに着想を得た要素
セクション 6：破ってはいけないルール
スケルトンでほとんどの構造ルールに対応できます。以下は、スケルトンでは強制できない実行時のルールです。
決定性（絶対厳守）
| 使用禁止 | 代わりに使用するもの |
|---|---|
Math.random() | シード付き PRNG（乱数が必要な場合のみ） |
Date.now(), performance.now() | 固定のタイミング、または onUpdate 内の tl.time() |
setInterval, setTimeout | タイムラインのトゥイーン＋onUpdate |
repeat: -1 | repeat: Math.ceil(duration / cycle) - 1 |
stagger: { from: "random" } | from: "start", "center", "end" |
| 非同期のタイムライン構築 | ページ読み込み時に同期的に構築 |
メディアのルール
| 使用禁止 | 代わりに使用するもの |
|---|---|
video.play(), audio.play() | 再生はフレームワークに任せる |
muted のない <video> | 常に muted playsinline |
<video> 上の音声 | 独立した <audio> 要素 |
| Base64 メディア | ファイル参照または HTTPS URL |
| プレースホルダー URL（placehold.co） | 実際のアセット |
アニメーションのルール
| 使用禁止 | 代わりに使用するもの |
|---|---|
| シェーダー遷移前の終了トゥイーン | シェーダーが終了を担います。コンテンツは表示したままにします |
シーンコンテナーに対する tl.set / tl.to | シーンの不透明度は HyperShader に任せます |
requestAnimationFrame | GSAP トゥイーン |
| セレクター内のテンプレートリテラル | 固定文字列 |
中央揃えに CSS transform を使用 | ラッパーでの Flexbox による中央揃え |
SVG フィルターの data:image/svg+xml 粒子 | CSS の radial-gradient 粒子（以下のパターンを参照） |
visibility / display のアニメーション | autoAlpha を使用 |
セルフレビューのチェックリスト
納品前に実行してください。推測ではなく、実際のコードで確認してください。
構造の妥当性（必ず合格すること。Claude Code では簡単に修正できません）：
- すべてのシーンに
class="scene clip"とすべての data 属性がある - すべてのシーンに
<div class="scene-content">ラッパーがある - アンカーシーンには
style="opacity:0;"がある。アンカー以外のシーンにはstyle="visibility:hidden;"がある - アンカー以外のすべてのシーンに
autoAlphaを使ったtl.setがある（visibilityは不可）。開始時はautoAlpha: 1、終了時はautoAlpha: 0にする - 各シェーダーグループの最初のアンカーシーンに
tl.set("#sN", { opacity: 1 }, startTime)がある。これがないと、シーンは表示されません - シーンの表示区間が途切れず連続している（隙間がない）
- シェーダー遷移の境界がウィンドウ内にある：
time < boundary < time + duration - 0.3s 未満の遷移がない
- 最終シーン以外に終了トゥイーンがない
-
Date.now()、シードなしのMath.random()、repeat: -1がない -
background-imageに SVG フィルターのデータ URL がない -
window.__timelines["main"] = tlがdata-composition-idと一致している
ブランドとコンテンツの正確性（最も重要な作業です。正確に仕上げてください）：
- 色がブリーフ／添付ファイルと正確に一致している
- 禁止されているフォントを使っていない
- 最小フォントサイズ：見出しは 60px 以上、本文は 20px 以上、ラベルは 16px 以上
- 数値列に
font-variant-numeric: tabular-numsが指定されている - すべてのシーンに意味のあるコンテンツがある（プレースホルダーテキストではない）
- シーン数と長さが動画の種類に合っている
アニメーションの基本（まずはこれで十分です。Claude Code が仕上げます）：
- すべてのシーンに少なくとも 1 つの登場トゥイーン（
tl.from）がある - 4s を超えるすべてのシーンに、シーン途中の動き（浮遊、カウンター、グロー）が少なくとも 1 つある
- 完全に静止したシーン（トゥイーンが一切ないシーン）がない
- シーンのテキストが、表示時間内に読める
セクション 7：スケルトン
preview.html（汎用 -- すべての動画タイプでそのままコピー）
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>HyperFrames Preview</title>
<style>
html,
body {
margin: 0;
padding: 0;
background: #111;
height: 100%;
overflow: hidden;
}
</style>
<script type="module" src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script>
</head>
<body>
<hyperframes-player
id="p"
controls
autoplay
muted
style="display:block;width:100vw;height:100vh"
></hyperframes-player>
<script>
document.getElementById("p").setAttribute("src", "./index.html" + location.search);
</script>
</body>
</html>
README.md（汎用 -- <project-name> を置き換え）
# <project-name>
A HyperFrames video composition. Plain HTML + GSAP; rendered to MP4 by the `hyperframes` CLI.
## Requirements
- **Node.js 22+** -- [nodejs.org](https://nodejs.org/)
- **FFmpeg** -- `brew install ffmpeg` (macOS) or `sudo apt install ffmpeg` (Debian/Ubuntu) or [ffmpeg.org/download](https://ffmpeg.org/download.html) (Windows)
Verify: `npx hyperframes doctor`
## Preview
```bash
npx hyperframes preview
```
Opens the HyperFrames Studio at `http://localhost:3002` with frame-accurate scrubbing.
## Refine with Claude Code
This project was drafted in Claude Design. To polish animations, timing, and pacing:
```bash
npx skills add heygen-com/hyperframes # install HyperFrames skills (one-time)
npx hyperframes lint # verify structure (should pass with zero errors)
npx hyperframes preview # open the studio for live feedback
```
Then open in Claude Code and iterate:
- "Make scene 3's entrance snappier"
- "Add a counter animation to the stat in scene 5"
- "Tighten the pacing -- scenes 4 and 6 feel too long"
- "Change the shader on transition 3 to glitch"
## Render
```bash
npx hyperframes render index.html -o output.mp4
```
1920x1080 / 30fps by default. Use `--fps 60` or `--resolution 3840x2160` to override.
スケルトン A -- ソーシャルリール（1080x1920、15秒、6シーン）
トランジションプラン：s1→s2 ハードカット、s2→s3 ハードカット、s3→s4 シェーダー（ヒーローの登場）、s4→s5 ハードカット、s5→s6 ハードカット。中間地点にシェーダーを1つ配置します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1080, height=1920" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/shader-transitions/dist/index.global.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono:wght@400&display=swap"
rel="stylesheet"
/>
<style>
:root {
/* === FILL: Your brand identity === */
--bg: #0a0a0d;
--ink: #f5f5f7;
--accent: #7c6cff;
--muted: #5a6270;
--accent-dim: #3d3680;
--font-display: "Space Grotesk", sans-serif;
--font-data: "JetBrains Mono", monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 1080px;
height: 1920px;
overflow: hidden;
background: var(--bg);
color: var(--ink);
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene-content {
width: 100%;
height: 100%;
padding: 120px 80px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.clip {
}
.display {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
}
.body-text {
font-family: var(--font-display);
font-weight: 300;
line-height: 1.4;
color: var(--muted);
}
.data-text {
font-family: var(--font-data);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 50;
opacity: 0.18;
background-image:
radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px),
radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1.2px);
background-size:
3px 3px,
5px 5px;
background-position:
0 0,
1px 2px;
mix-blend-mode: overlay;
}
/* === FILL: Per-scene styles below === */
</style>
</head>
<body>
<div
id="main"
data-composition-id="main"
data-width="1080"
data-height="1920"
data-start="0"
data-duration="15"
>
<div class="scene clip" id="s1" data-start="0" data-duration="2.5" data-track-index="0">
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
<div
class="scene clip"
id="s2"
data-start="2.5"
data-duration="2.5"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
<div
class="scene clip"
id="s3"
data-start="5"
data-duration="2.5"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
<div
class="scene clip"
id="s4"
data-start="7.5"
data-duration="2.5"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
<div
class="scene clip"
id="s5"
data-start="10"
data-duration="2.5"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
<div
class="scene clip"
id="s6"
data-start="12.5"
data-duration="2.5"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="scene-content">
</div>
</div>
</div>
<script>
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
// --- Non-anchor scene toggles (REQUIRED — use autoAlpha) ---
tl.set("#s1", { autoAlpha: 0 }, 2.5);
tl.set("#s2", { autoAlpha: 1 }, 2.5);
tl.set("#s2", { autoAlpha: 0 }, 5.0);
// s3, s4 are shader anchors — HyperShader manages their opacity
tl.set("#s3", { opacity: 1 }, 5.0); // first anchor must be explicitly shown
tl.set("#s5", { autoAlpha: 1 }, 10.0);
tl.set("#s5", { autoAlpha: 0 }, 12.5);
tl.set("#s6", { autoAlpha: 1 }, 12.5);
// === SCENE 1 (0-2.5s) — hook ===
// FILL: entrance + mid-scene activity (use 2+ patterns from Section 8)
// === SCENE 2 (2.5-5s) ===
// FILL: entrance + mid-scene activity
// === SCENE 3 (5-7.5s) — SHADER ANCHOR, no exit tweens ===
// FILL: entrance + mid-scene activity
// === SCENE 4 (7.5-10s) — hero (shader reveals this) ===
// FILL: entrance + mid-scene activity
// === SCENE 5 (10-12.5s) — proof ===
// FILL: entrance + mid-scene activity
// === SCENE 6 (12.5-15s) — CTA, final scene, exit OK ===
// FILL: entrance + mid-scene activity + optional exit
// --- Shader: 1 transition at the hero reveal ---
window.HyperShader.init({
bgColor:
getComputedStyle(document.documentElement).getPropertyValue("--bg").trim() || "#0a0a0d",
scenes: ["s3", "s4"],
timeline: tl,
transitions: [{ time: 7.25, shader: "cinematic-zoom", duration: 0.5 }],
});
window.__timelines["main"] = tl;
</script>
</body>
</html>
スケルトン B -- ローンチティーザー（1920x1080、25秒、8シーン）
トランジションプラン：s1→s2 ハードカット、s2→s3 ハードカット、s3→s4 ハードカット、s4→s5 シェーダー（ヒーローの登場）、s5→s7 シェーダー（エネルギーの変化、s6は実行時に管理されるインタースティシャルとして再生）、s7→s8 シェーダー（CTAへの着地）。7つのカットのうち、シェーダーは3つです。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=1920, height=1080" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/core/dist/hyperframe.runtime.iife.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@hyperframes/shader-transitions/dist/index.global.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=JetBrains+Mono:wght@400&display=swap"
rel="stylesheet"
/>
<style>
:root {
/* === FILL: Your brand identity === */
--bg: #0a0a0d;
--ink: #f5f5f7;
--accent: #7c6cff;
--muted: #5a6270;
--accent-dim: #3d3680;
--font-display: "Space Grotesk", sans-serif;
--font-data: "JetBrains Mono", monospace;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 1920px;
height: 1080px;
overflow: hidden;
background: var(--bg);
color: var(--ink);
}
.scene {
position: absolute;
top: 0;
left: 0;
width: 1920px;
height: 1080px;
overflow: hidden;
}
.scene-content {
width: 100%;
height: 100%;
padding: 100px 160px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
.clip {
}
.display {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.1;
}
.body-text {
font-family: var(--font-display);
font-weight: 300;
line-height: 1.4;
color: var(--muted);
}
.data-text {
font-family: var(--font-data);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
.grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 50;
opacity: 0.18;
background-image:
radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px),
radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1.2px);
background-size:
3px 3px,
5px 5px;
background-position:
0 0,
1px 2px;
mix-blend-mode: overlay;
}
.vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 49;
background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
}
/* === FILL: Per-scene styles below === */
</style>
</head>
<body>
<div
id="main"
data-composition-id="main"
data-width="1920"
data-height="1080"
data-start="0"
data-duration="25"
>
<div class="scene clip" id="s1" data-start="0" data-duration="3" data-track-index="0">
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s2"
data-start="3"
data-duration="3"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s3"
data-start="6"
data-duration="3"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s4"
data-start="9"
data-duration="3.5"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s5"
data-start="12.5"
data-duration="3"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s6"
data-start="15.5"
data-duration="3"
data-track-index="0"
style="visibility:hidden;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s7"
data-start="18.5"
data-duration="3"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
<div
class="scene clip"
id="s8"
data-start="21.5"
data-duration="3.5"
data-track-index="0"
style="opacity:0;"
>
<div class="grain"></div>
<div class="vignette"></div>
<div class="scene-content"></div>
</div>
</div>
<script>
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
// --- Non-anchor scene visibility toggles (REQUIRED) ---
tl.set("#s1", { autoAlpha: 0 }, 3.0);
tl.set("#s2", { autoAlpha: 1 }, 3.0);
tl.set("#s2", { autoAlpha: 0 }, 6.0);
tl.set("#s3", { autoAlpha: 1 }, 6.0);
tl.set("#s3", { autoAlpha: 0 }, 9.0);
// --- First shader anchor must be explicitly shown ---
tl.set("#s4", { opacity: 1 }, 9.0);
// s4, s5 are shader anchors — HyperShader manages their opacity after transitions
tl.set("#s6", { autoAlpha: 1 }, 15.5);
tl.set("#s6", { autoAlpha: 0 }, 18.5);
// --- Second shader group's first anchor must also be shown ---
tl.set("#s7", { opacity: 1 }, 18.5);
// s7, s8 are shader anchors — HyperShader manages their opacity after transitions
// === SCENE 1 (0-3s) — hook ===
// === SCENE 2 (3-6s) — hard cut ===
// === SCENE 3 (6-9s) — hard cut ===
// === SCENE 4 (9-12.5s) — SHADER ANCHOR, no exit tweens ===
// === SCENE 5 (12.5-15.5s) — shader from s4, hero reveal ===
// === SCENE 6 (15.5-18.5s) — hard cut ===
// === SCENE 7 (18.5-21.5s) — SHADER ANCHOR, no exit tweens ===
// === SCENE 8 (21.5-25s) — shader from s7, CTA. Final, exit OK ===
// --- Shader transitions: 2 key moments ---
// s4->s5 (hero reveal) and s7->s8 (CTA landing)
// HyperShader requires consecutive anchors, so we use two groups:
// Group 1: [s4, s5] with 1 transition
// Group 2: [s7, s8] with 1 transition
// But HyperShader only supports one init() call, so we chain them:
// [s4, s5] — shader — then runtime hard-cuts s5->s6->s7 — then [s7, s8]
// To satisfy the invariant with one init(), we include s5->s7 gap scenes.
// Simplest: just use one contiguous anchor block [s4, s5, s7, s8] with
// the s5->s7 transition as a real (visible) shader too. This gives you
// 3 shaders total — still well under the "every cut" anti-pattern.
window.HyperShader.init({
bgColor:
getComputedStyle(document.documentElement).getPropertyValue("--bg").trim() || "#0a0a0d",
scenes: ["s4", "s5", "s7", "s8"],
timeline: tl,
transitions: [
{ time: 12.25, shader: "cinematic-zoom", duration: 0.5 },
{ time: 15.25, shader: "light-leak", duration: 0.5 },
{ time: 21.25, shader: "cross-warp-morph", duration: 0.5 },
],
});
window.__timelines["main"] = tl;
</script>
</body>
</html>
スケルトン C -- 製品解説動画（1920x1080、45秒、12シーン）
スケルトン B と同じ構造を使用しますが、シーン div を12個（s1-s12）配置し、data-duration の合計を45秒、トランジションを11個にします。コンテンツの密度に応じて、3秒、3.5秒、4秒、5秒のシーンを組み合わせて長さを調整します。次のようなシーンのリズムを含めてください：3-3-4-3.5-4-5-3.5-4-3.5-4-4-3.5。
スケルトン D -- シネマティックタイトル（1920x1080、60秒、7シーン）
7個のシーン div（s1-s7）を配置し、各シーンを長め（6～10秒）にして、トランジションを少なめ（6個）にし、シェーダーは控えめに（cross-warp-morph、thermal-distortion）使用する、同じ構造にします。シーンのリズム：8-7-8-10-9-10-8。
セクション 8：一般的なアニメーションパターン
以下をコピーして貼り付けてください。すべての本番用コンポジションに登場します。
カウンターアニメーション
var counterObj = { v: 0 };
tl.to(
counterObj,
{
v: 1900000000000,
duration: 2.0,
ease: "power2.out",
onUpdate: function () {
document.getElementById("s3-stat").textContent = "$" + (counterObj.v / 1e12).toFixed(1) + "T";
},
},
10.5,
);
SVG ストローク描画
<svg viewBox="0 0 400 200" style="position:absolute; bottom:100px; left:160px;">
<path
id="s2-line"
d="M 0 100 Q 200 20 400 100"
stroke="var(--accent)"
stroke-width="3"
fill="none"
stroke-linecap="round"
stroke-dasharray="440"
stroke-dashoffset="440"
/>
</svg>
tl.to("#s2-line", { strokeDashoffset: 0, duration: 1.0, ease: "power2.out" }, 3.5);
文字ごとのスタガー
<h1 class="display" style="font-size:120px;">
<span class="char">N</span><span class="char">O</span><span class="char">R</span>
<span class="char">T</span><span class="char">H</span>
</h1>
tl.from(
".char",
{
y: 60,
autoAlpha: 0,
duration: 0.5,
ease: "power3.out",
stagger: { each: 0.12, from: "start" },
},
29.5,
);
呼吸するような浮遊（シーン中の動き）
tl.to(
"#s4-logo",
{
y: -5,
duration: 1.5,
ease: "sine.inOut",
yoyo: true,
repeat: 1,
},
15.0,
);
棒グラフの塗りつぶし
["#bar1", "#bar2", "#bar3", "#bar4"].forEach(function (sel, i) {
tl.from(
sel,
{
scaleY: 0,
transformOrigin: "bottom",
duration: 0.6,
ease: "expo.out",
},
11.0 + i * 0.15,
);
});
周回／回転
tl.to(
"#orbit-dot",
{
rotation: 360,
duration: 3.0,
ease: "none",
transformOrigin: "50% 200px",
},
8.5,
);
ハイライトスイープ（background-size アニメーション）
#s5-headline {
background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 85% / 0% 30%;
}
tl.to("#s5-headline", { backgroundSize: "100% 30%", duration: 0.6, ease: "power2.out" }, 22.0);
CSS radial-gradient のグレイン（Safari と Claude Design の iframe で安全）
.grain {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 50;
opacity: 0.18;
background-image:
radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1.2px),
radial-gradient(rgba(0, 0, 0, 0.18) 1px, transparent 1.2px);
background-size:
3px 3px,
5px 5px;
background-position:
0 0,
1px 2px;
mix-blend-mode: overlay;
}
SVG フィルターの data:image/svg+xml グレインは絶対に使用しないでください -- Safari で html2canvas を汚染し、Claude Design のクロスオリジン iframe 内ですべてのシェーダートランジションが壊れます。
参考資料（必要な場合のみ取得）
重要な内容はすべて上記に記載されています。以下は特殊なケース向けです。
- コアコンポジションの仕様（data 属性、サブコンポーネントの配線）：https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/SKILL.md
- モーション理論（感情としてのイージング、方向のルール）：https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/motion-principles.md
- タイポグラフィ（禁止項目の全リスト、ウェイトのコントラスト、OpenType）：https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/typography.md
- トランジション（シェーダーカタログ、CSS トランジションのパターン）：https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/transitions.md
- 音声に同期した字幕：https://github.com/heygen-com/hyperframes/blob/main/skills/hyperframes/references/captions.md
- ドキュメント全文：https://hyperframes.heygen.com/
コメント
Markdown 対応