VYBE タイポグラフィ
モーショングラフィックスにおいて、タイポグラフィはしばしば主役です。タイポグラフィをフッテージのように扱いましょう。重さ、スケール、リズム、そしてカメラを持っています。
バンドルフォント（OFL、vybe/assets/fonts/ にあり、すべてのプロジェクトにコピーされます）
| ファミリー | 特徴 | 適性 |
|---|---|---|
| Inter (variable 100–900) | ニュートラル、正確 | Appleミニマル、コーポレート、UI、キャプション |
| Space Grotesk (300–700) | テクニカル、風変わり | 科学的、実験的、テック |
| Fraunces (variable serif) | 温かみのある、文学的な、高コントラスト | シネマティック、ドキュメンタリー、編集 |
| JetBrains Mono (100–800) | コード、データ | ラベル、数字、ターミナル風 |
| Anton (400, condensed) | 派手、ポスター風 | キネティックタイポグラフィ、ソーシャルフック |
| Orbitron (variable) | SFディスプレイ | サイバーパンクのタイトル（短い単語のみ） |
名前付きの各ファミリーは、それを使用するファイル（HyperFrames lint）内で @font-face { src: url("assets/fonts/<file>.woff2") } が必要です。ユーザー独自のブランドフォント：assets/fonts/ にファイルをコピーし、同様に宣言します。そのライセンスが埋め込みを許可していることを確認してください。
ペアリング: Fraunces + Inter（シネマティック）· Inter + JetBrains Mono（プロダクト/テック）· Space Grotesk + JetBrains Mono（サイエンス）· Anton + Space Grotesk（ソーシャル/キネティック）· Orbitron（タイトルのみ）+ Space Grotesk（その他すべて）。
ビデオにおける可読性ルール（hyperframes check クラフト監査で強制）
- 最小読み取りサイズ: 短辺の2.6% →
2.7cqmin（1080pで28px）。本文2.8–3.4cqmin、見出し6–12cqmin、ヒーローワード15–34cqmin。 - ホールド時間 ≈ 1単語あたり0.3秒 + 0.5秒。クロージングラインは2秒以上。
- シーン全体で画面上の1秒あたりの単語数は3.2以下。1行あたりの単語数は10以下。
- コントラストはWCAG AA（本文4.5:1、大テキスト3:1）。画像の上にある場合は、スクリムまたは影を追加。
- 本文では
<br>を使用しない。max-width（例：78cqw）を使用し、折り返しに任せる。 表示タイトルは、行ごとにブロック<span>で意図的に改行してもよい。 - トラッキング：大きな表示は詰める（−0.02〜−0.05em）、小さな大文字ラベルは広げる（+0.2〜+0.5em）。
letter-spacingをアニメーションさせない（スナップするため）— グリフをxで広げる。 - セーフゾーン：縦型動画では、読み取りテキストを上部12%、下部22%、右側14%から外に配置する。
キネティック技法
| 技法 | 方法 |
|---|---|
| ブラーからシャープな単語 | 単語をインラインブロックのspanに、fromTo {opacity:0,y:30,filter:blur(14px)}、0.12～0.16のストガー |
| スラム | ビートごとに1単語、scale 2.4 → 1をback.out(1.6)で、背景で色フィールドが反転 |
| マスクライズ | 行ラッパー overflow:hidden、内側テキスト yPercent 110 → 0 |
| センターアウト表示 | clipPath: inset(0 50% 0 50%) → inset(0) |
| グリフスプレッド | 文字ごとの x オフセットを中心に向かって収束させ0にする |
| タイプライター | clipPath を steps(n) イージングでインセット、または文字ごとに透明度を設定 |
| アウトラインデコー | 複製した単語に -webkit-text-stroke、透明な塗り、オフセットした軌跡 |
| タイプをカメラとして | 単語スタック全体をフレーム越しに次のシーンへスケール/回転 |
| ワードスワップ | 固定ボックスに2つの単語を重ね、yPercent で古い単語を出し、新しい単語を入れる |
| ハイライト | インラインブロックの .hl spanを back.out でスケール、またはその後ろでマーカーバー scaleX 0→1 |
| カウントアップ | tabular-nums + onUpdate で Math.round(v) を書き込み |
キャプション（単語同期）
vybe audio は <script type="application/json" id="vybe-captions"> キュー（{start, end, text, words:[{text,start,end}]}）を注入し、すべてのVYBEテンプレートには、キューごとに1つの要素を作成し、各単語をその転写された start で照らすキャプションビルダーが含まれています。ブランドごとにスタイルを設定：
- セーフゾーン内に配置し、下3分の1のグラフィックより上に、被写体を覆わないように。
- キューあたり3〜6単語、最大2行、3〜3.4cqmin、ウェイト600以上、スクリムまたは影。
- アクティブな単語をハイライト（opacity 0.45 → 1、またはクラス経由でアクセントカラー）。
- ソーシャル：大文字、太字、キューごとにポップなスケール。シネマティック：文の先頭のみ大文字、控えめなフェード。
- 推定単語タイミングでキャプションを作成しないこと。行レベルのタイミングは行レベルに見えるようにする必要があります。