VYBE 排版
在動態圖像中，文字往往是主角。將其視為影片素材：它擁有 重量、比例、節奏和鏡頭。
內建字型（OFL 授權，位於 vybe/assets/fonts/，會複製到每個專案）
| 字型家族 | 特色 | 適用場景 |
|---|---|---|
| Inter（可變字重 100–900） | 中性、精確 | 蘋果簡約風格、企業、UI、字幕 |
| Space Grotesk（300–700） | 科技感、獨特 | 科學、實驗性、科技 |
| Fraunces（可變襯線字型） | 溫暖、文學感、高對比 | 電影感、紀錄片、社論 |
| JetBrains Mono（100–800） | 程式碼、資料 | 標籤、數字、終端機風格 |
| Anton（400，窄體） | 大聲、海報風格 | 動態文字、社群媒體鉤子 |
| Orbitron（可變） | 科幻展示 | 科幻風標題（僅限短詞） |
每個命名字型都需要在使用的檔案中加上 @font-face { src: url("assets/fonts/<file>.woff2") }（HyperFrames 會檢查）。若使用客戶品牌字型：將檔案複製到 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。 - 停留時間 ≈ 每詞 0.3 秒 + 0.5 秒；結尾行 ≥ 2 秒。
- 一個場景中，每螢幕詞數 ≤ 3.2 詞/秒；每行 ≤ 約 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%。
動態文字技術
| 技巧 | 做法 |
|---|---|
| 模糊轉清晰 | 文字以 inline-block span 呈現，fromTo {opacity:0,y:30,filter:blur(14px)}，依序延遲 0.12–0.16 |
| 撞擊 | 每拍一個詞，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、透明填色，偏移產生殘影 |
| 文字作為鏡頭 | 將整組文字縮放/旋轉移出畫面，過渡至下一場景 |
| 詞語切換 | 在固定方框中疊加兩個詞；yPercent 將舊詞移出、新詞移入 |
| 突顯效果 | 行內區塊 .hl 搭配 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 範本都包含
一個字幕建構器，會為每個提示建立一個元素，並在轉錄的 start 時間點亮每個詞。依品牌風格調整：
- 置於安全區域內、低於下方圖形，絕不遮擋主體。
- 每個提示 3–6 個詞，最多 2 行，字級 3–3.4cqmin，字重 600+，添加遮罩或陰影。
- 突顯當前詞（透明度 0.45 → 1，或透過類別使用強調色）。
- 社群風格：全大寫、粗體、每個提示有放大效果；電影風格：句子大小寫、柔和淡入淡出。
- 絕不使用估計的逐詞時間軸；行級時間必須看起來是行級的。