vox-style-animation

Vox風アニメーション

HyperFrames（HTMLから動画をレンダリングします）を基盤にした、Voxのエディトリアル・コラージュ風モーショングラフィックスのスタイルパックです。このスキルでは、このルックを再現するためのカラーパレット、タイポグラフィシステム、モーションの語彙、テクスチャシステム、そして経験から得られた制作のルールを紹介します。さらに、references/capture-your-own-style.mdでは、目にしたあらゆるスタイルを自分のスタイルパックに仕立てる手法を紹介します。

2つの約束です。 （1）すぐに制作に使えるVoxのルックをすべて紹介します。（2）あらゆる美的スタイルで同じことを自分で行う方法を紹介します。応用できるスキルはスタイルを取り込む手法であり、それこそがこのリポジトリの存在理由です。

前提条件

これはHyperFramesのスタイルパックであり、単独で動作するレンダラーではありません。まずHyperFramesをインストールし、その後でこのパックをインストールしてください。

npx skills add heygen-com/hyperframes          # the framework + its skills
npx skills add <owner>/vox-style-animation      # this style pack

npx hyperframes render <project-dir>を使えば、何でもレンダリングできます。すぐにレンダリングできるサンプルはassets/starter/にあります。これをコピーして、コピーしたものを変更してください。

表現の基本：「光るのではなく、印刷されたように」

多くのモーショングラフィックスは光を放ちます。輝く文字、クロームのグラデーション、黒い空間に浮かぶ光の輪などです。Voxは印刷物のように見せます。クリーム色の紙に載ったインク、くっきりしたずらし影と切り抜きの縁による奥行き、網点と紙の粒子による質感です。光るものはありません。すべてが印刷物を組み合わせたモーションコラージュのように見えます。

制作を始める前に、表現の基本を一文で言い表してください。以下のすべては、その一文を実現するためのものです。

カラーパレット — 5色、それぞれに意味は1つだけ

assets/brand-tokens.cssで定義されています。色ごとに役割を1つだけ与えることが、装飾的ではなく意図的な印象につながります。

色	16進数	意味	用途
ペーパークリーム	#f2ecdf	キャンバス／ページ	すべてのシーンの背景
インクブラック	#161513	構造／語り手の声	文字、輪郭線、ストローク
Voxイエロー	#ffd200	強調／蛍光ペン	1シーンにつき1つだけの重要語
シグナルレッド	#e5483f	古い世界／コスト／摩擦／否定	取り消し線付きのボックス、崩壊
コバルト	#2f5fe8	新しい能力／古いものに取って代わるもの	新時代のノード、フローライン

ルールの確認： 赤とコバルトは、古いものと新しいものが衝突する唯一の「転換」シーンを除き、同じビートでは決して使いません。この衝突そのものが物語です。

タイポグラフィ

• 見出し／キネティックタイポグラフィ： Archivo Black。フラットなインクで、グラデーションも光彩も使いません。文字を拡大して勢いよく打ち出し、きらめかせないでください。line-height: 0.98、すべて大文字にします。
• エディトリアルキャプション／ラベル： Inter 500/700。
• 余白の注釈： 手書きのメモにはCaveatを控えめに使用します（作品1つにつき2つ以下）。
• 強調の演出： 単語の背後に黄色の蛍光ペンのひと塗り（実際の.hl-block要素を左からscaleX 0→1、0.45s power2.outで動かす）を置くか、赤い取り消し線を引きます。テキスト自体の色は変えません。マーカーが強調の役割を担います。

テクスチャと奥行き（統一感を生み出すシステム）

• すべてのシーンに紙の粒子を加えます。PNGは使わず、純粋なCSSの3層radial-gradientで表現します。
• セクションのテクスチャには網点のドットフィールドを使います（2サイズのCSS radial-gradientドットタイル）。これを、全体を統一するテクスチャとしてグリッドや十字線の代わりに使います。
• 写真は網点／デュオトーン加工済みのPNG切り抜きとして事前に用意します。実行時のフィルターは使いません（references/asset-pipeline.mdを参照）。
• くっきりしたずらし影： box-shadow: 10px 12px 0 rgba(22,21,19,.16)。印刷物の奥行きを表現し、ぼかした光彩は使いません。
• カメラは止まりません： コラージュのグループをゆっくり2～3%拡大縮小し、紙の要素を±0.5°回転させ、ドットフィールドをパンします。

モーション語彙

基本的な動き（詳しい手順と調整済みのデフォルト値の表は references/motion-vocabulary.md を参照してください）：

動き	1行の手順
紙を叩きつけるように登場	scale 1.15→1、rotation ±2→settle ±0.4–0.8° crooked、0.5s の back.out(1.15)、ヒーロー要素にブラーイン
蛍光ペンでなぞる	キーワードの背後に黄色の .hl-block を配置し、左から scaleX 0→1、0.45s の power2.out
取り消し線	単語に −2.5° 傾けた赤いバーを通し、scaleX 0→1、0.55s の power3.out
シートワイプ（カット）	全幅の紙シートを ~0.4s の power3.in で横切らせます — 唯一のトランジション手法です
ノードの開花	scale 0→1 back.out(1.6) と、stroke-dashoffset で描画するコバルト色の接続線
カウントアップ表示	プロキシオブジェクトのトゥイーンで textContent を書き換え、ease: none、フレームにスナップ
単語ごとの表示	VO の開始タイミングに単語を合わせ、y: 24, opacity 0、0.55–0.75s の expo.out

**重要な詳細：**蛍光ペンや擬似ビジュアルは、CSS の ::before ではなく、実際の DOM 要素にしてください。GSAP では擬似要素をトゥイーンできません。

構成ルール

• compositions/s1…sN.html にサブコンポジションを作成します。それぞれに独自のスコープ付き <style> と、window.__timelines['<id>'] に登録する一時停止中の GSAP タイムラインを持つ、自己完結した <template> にします。
• index.html から data-composition-src と data-start / data-duration でつなぎます（assets/starter/ を参照してください）。
• すべてのタイムラインはスロットアンカーで終わらせます：tl.to({}, { duration: SLOT }, 0) — 動きが収まった後も、コンポジションを割り当てられたスロットの全時間にわたって維持します。
• 各作品につき、核となる比喩は1つにします。コールバックを使って繰り返し登場させます（バッジが再登場する、ボックスが折りたたまれる、ノードが戻るなど）。
• **アウトロを4–6s保持します：**主張の一文と、静かなドリフトを加えます。

リサーチに基づくルール

Vox のモーションチームと解説動画の文献（Estelle Caswell / Vox、Joey Sendaydiego / Storybench、PremiumBeat、No Film School）を出典としています。

1. **ドットフィールドに限り、12fps のカクつきを適用します。**背景のドットフィールドのパンと手描きのペンストロークにのみ ease: "steps(duration × 12)" を適用し、それ以外には使いません。ヒーローの文字や大きな画像のドリフトに適用すると、機械的に見えます。それ以外のすべての動きには、0.5–0.75s の滑らかでソフトランディングするイージング（power3／expo.out、back.out ≤1.3）を使います。
2. **証拠に注釈を付けます。**少なくとも1つのビートで、実物の資料に赤ペンで注釈を付けます（数値をラフな円で囲むなど、カクついた描画にします）。自分の見出しだけでなく、資料そのものに注釈を付けてください。
3. **エディトリアルな不完全さを残します。**カードは軸から ±0.4–0.8° 傾けて止め、決して完全にまっすぐにはしません。磨き上げすぎると、エディトリアルではなく広告のように見えます。
4. テクスチャは意味を伝えます。「旧世界」のシーンにはアーカイブ風の網点素材を、「新しい」シーンにはフラットなベクターを使い、画風の変化が物語の転換として伝わるようにします。
5. **動きは説明のために使い、装飾にはしません。**すべての動きに意味を持たせます。純粋なトランジションはシートワイプのみとし、毎回同じ手法を使います。

制作工程のルール（いずれも失敗したドラフトから学んだもの）

1. 動作する既存の類似例の配線をコピーします — コンポジションの構造を記憶から書かないでください。assets/starter/ から始めます。
2. カットの両側で、すべての境目をフレームで確認します — 白紙の描画ではレンダリング時にエラーが出ません。フレームを抽出して確認してください。
3. イージングの選択は、構造とは別の失敗要因です — 正しいワイプでも、イージングが不適切ならフラッシュが発生します。
4. 常にVOを優先します — タイムラインは音声に同期します。暫定の単語数に基づくタイミングで組み立ててから、実際のVOに含まれる Whisper の開始タイミングに合わせて、すべての境界を再調整します。（作業例は examples/how-it-works/ を参照してください。）
5. 同じプロパティを動かすトゥイーンは、絶対に重ねないでください — 開始時の動きが終わった時点でドリフトを始め、y を同時にアニメーションさせないようにします（速度の停滞が起きます）。
6. パッチスクリプトの終了コードをレンダリングの実行条件にします — str.replace は対象が見つからなくても何もせず終了します。対象が存在することと、置換後の数をアサートしてください。

避けるべきこと

• クロームグラデーション、ハローのような発光、パースペクティブグリッドは使わないでください。このスタイルには合いません。
• ダークモードのシーンは使わないでください。紙が真っ黒になることはありません（崩壊を表すときは赤で暗くします）。
• 画面上に統計を作り込まないでください。すべての数値はナレーションに登場している必要があります。
• 実行時の画像処理やランダム処理は使わないでください。ハーフトーンは事前に生成し、ジッターには決定論的なハッシュを使います（レンダリング結果は再現可能でなければなりません）。

参考資料

• references/capture-your-own-style.md — ⭐ 目にしたあらゆるスタイルを自分だけのパックにする7ステップの方法。このリポジトリの目玉となる提案です。
• references/motion-vocabulary.md — すべての動きの詳細な手順と、調整済みのデフォルト値一覧です。
• references/asset-pipeline.md — ハーフトーンやアーカイブ風の切り抜きを生成する方法（scripts/）と、実行時フィルターが禁止されている箇所を説明しています。
• references/overlay-pack.md — 既存の映像に合成する、アルファチャンネル付きの透過オーバーレイ（ローワーサード、動きのある強調表示）です。

ファイル

• assets/brand-tokens.css — カラーパレットと再利用可能なクラス（.card、.hl、.strike、.dot-field、.sheet-wipe、.node、.badge）です。
• assets/starter/ — 最小構成で自己完結した、レンダリング可能なプロジェクトです。これをコピーして始めてください。npx hyperframes render assets/starter -o out.mp4。
• scripts/ — gen_archival_objects.py、halftone_objects.py（アセットパイプライン）です。
• ../../examples/how-it-works/ — VOに合わせて完成させた作例です（このリポジトリ独自の解説動画で、このパックを使って作成されています）。