Reels 排版風格 (Video-1 + Tapsite)
29 張參考幀：~/motion-videos/Video-1_frames/Video-1_<mm>-<ss>.jpg。
廣告參考：~/motion-videos/iklan-tapsite/tapsite-draft/out/tapsite-final.mp4 (17 場景, FX 圖示, Meta Ads 9:16)。
1. 背景類型 — 何時使用哪種
| 類型 | 幀數 | 使用時機 | 背景值 | 文字顏色 |
|---|---|---|---|---|
| FOOTAGE-dim | 02,03,08,10,11,12,14,15,16,19,21,23,24,25,26,27 (16×) | 情感/敘事節奏、人性時刻、向觀眾提問 | 影片 + 黑色疊加層 40–55% | 白色 #FFFFFF，發光 0 2px 24px rgba(0,0,0,.55) |
| SOLID-blue | 01,05,06,07,18,20 (6×) | 概念、定義、清單、靜修/促銷資訊 | #1D58FA 純色 | 白色；重點見解時 serif 可使用金色 #FFD98A |
| ILUSTRASI-sketsa | 00,04,09,13,17,22,28 (7×) | 影片無法呈現的抽象概念（意義、大腦、框架、CTA） | 白色 #FDFBFC + 藍色線條 SVG | serif 藍色 #1D58FA，sans 黑色 #111111 |
決策規則：如果台詞命名的是感受或問題 → 使用 FOOTAGE-dim。如果是概念或事實 → 使用 SOLID-blue。如果是看不見的東西（思想、意義、系統） → 使用 ILUSTRASI-sketsa。
2. 構圖 —「巨大 serif + 附著 sans」
每個畫面 = 1 個主詞 + 2–5 個小詞，最多 6 個詞：
[小字 sans, Inter 500, ~30px]
[巨大 SERIF — Playfair italic/semibold, ~90-150px]
[小字 sans 附著在 serif 腳/降部]
- 小字與主詞的大小比例 ≈ **1:3**。
- 小字與 serif **重疊**（藏於升部/降部），絕不放在分開的遠行。
- 畫面居中，垂直置中。每個畫面最多一個強調詞。
- 強調色：金色 `#FFD98A`（見解）、藍色 `#1D58FA`（CTA/靜修）、粉紅 `#E5488F`（重要性，少用）。
3. 動態語言
- 小字：淡入 + 上升 8px，0.15s，錯開 0.1s。
- 主 serif：模糊(12px) + 縮放(1.15) → 清晰，0.3s
expo.out。 - 切換：底板之間硬切；字幕在邊界淡出 0.2s。
- 每個場景停留約 1–1.5s；文字落地後絕不動畫。
- 草圖 SVG：線條繪製 (dashoffset)，徽章彈出
back.out(2)。
4. 模板
templates/ 中的可複製起點：
footage-dim.html— 調暗底板 + 發光字幕堆疊。solid-blue.html— 純藍底 + 白/金堆疊。ilustrasi-sketsa.html— 白底 + 內嵌 SVG 插槽 + 藍/黑堆疊。read-along-zoom.html— 文字放大 + 平移跟隨 VO (見 §7)。
5. 安全區域 (必須嚴格遵守)
畫布 720×1280。所有文字 + 重要物件必須在：
x: 70–650, y: 220–960 (側邊距 70px, 上邊距 220px, 下邊距 320px)。
原因：TikTok/Reels 的 UI (字幕、讚按鈕、進度條) 會遮蓋外部區域。
實用規則：
- 每個文字元素：
max-width: 580px; text-align: center。 - 主 serif >80px：每行最多 8–10 個字元；超過則換行。
- 小字 sans：每行最多約 28 個字元。
- 驗證：每個場景快照 → 疊加紅色方框 (70,220,650,960) → 不得有任何文字接觸邊線。
6. 文字–物件佈局 (3 種模式，見 examples/)
原則：文字和物件始終緊鄰，絕不遠距離漂浮。文字附著/覆蓋在物件之上。
| 模式 | 範例 | 規則 |
|---|---|---|
| 在上方 (文字在物件上方) | text-over-object.png: 草圖頭部上方 "You can understand these ideas" | 文字在 y220–500，物件在 y500–960。文字–物件間距 ≤80px。文字先入（主詞落地），然後物件繪製/彈出 — 視線從文字下降到物件。 |
| 在旁邊 (文字與物件並排) | `text-beside-object.png": "you need to step outside the routines" 與跑步者並排 | 文字在物件垂直中央（居中對齊）。適用於物件水平/延伸時。文字可覆蓋物件區域的 10–20%（加上發光以確保可讀性）。 |
| 附著 (小詞附著) | tuck-tight.png: "Jangan tunggu / semangat datang. / Semangat datang / setelah kamu mulai." | 小詞附著在主詞的升部/降部（負邊距 -8 到 -16px）。Inter+Playfair 組合在一個視覺行內，而非分開的遠行。 |
各模式適用的動態：
- OVER：文字落地 → 物件從下方繪製 (
strokeDashoffset, 0.9s) 或彈出back.out(2)。順序：主詞 → 物件 → 小詞。 - BESIDE：物件（影片）先慢速縮放，文字猛擊/突入覆蓋。文字必須有強
text-shadow。 - TUCK：主詞落地，小詞隨後淡入+上升，延遲 0.1–0.2s。不要在小詞之前動畫主詞 — 主詞是錨點。
7. 跟讀 (飄移 → 突擊 → 滑向中心關鍵詞)
來源：IG Reels @/p/DSEgFPnAW-P。最終模型：河流從一開始就活躍，
在重音詞處突然突擊，滑向中心關鍵詞。
4 階段結構：
- 飄移 + 揭示 (0 → 重音前) — 從一開始柔和縮放/平移
(scale 1→1.5, y +120→-40, x 0→80,
power1.inOut) + 每個詞在 VO 時間戳處fromTo透明度/y/模糊，0.35spower3.out。發光.lit0.4s。 已過詞在 0.8s 內淡至 .35。 - 突擊 (重音處，0.45s,
expo.out) — 突然縮放到約 2.2 + 河流移動 使重音詞畫面居中。其他區塊被推離 — 這正是正確效果。 - 滑行 (0.9s,
power3.inOut) — 縮放至 2.6 + 河流 x 持續滑行 至關鍵詞居中：x = -(詞距中距離 × scale)。單一過渡。 - 停滯 + 閃爍 — 關鍵詞居中停留。3 幀閃爍青色
#7DD3FC→ 奶油#FEF3C7→ 紫色#C4B5FD，0.1s，結束。
安全區域例外：階段 2–4故意溢出 (§5 不適用)。
可選退出：河流上使用 data-layout-allow-overflow。
必要輸入：每個詞的 VO 時間戳。無 VO：估計 0.3–0.4s/詞 (需標記)。
8. 字體配對 (必須嚴格遵守，來自 skill impeccable/typeset)
核心規則：每個影片最多 2 個字體家族。第二個家族只能在第一個家族無法勝任其角色時使用。不要在同一個畫面中混合 >2 個字體家族 (= 失敗，看起來業餘)。
預設配對 (經 Video-1 + IG Reels 驗證)：
- 正文/小字：Inter 500/600，字距 -1px。層級透過粗度 + 大小實現。
- 強調/主詞：Playfair Display italic 600，字距 -2px，金色
#FFD98A。
對比僅透過：粗度 (500→600)、大小 (46→130px)、顏色 (白色→金色)、 樣式 (正常→斜體)。不是透過每行更換字體家族。
替代配對 (1 個影片 = 1 個配對，不要混合)：
- 粗重/海報：Inter + Archivo Black (-3px)。 - 科技：Sora + Sora Bold。
- 編輯：Manrope + DM Serif。 - 緊湊：Sora + Oswald (+1px)。
深底淺字：與淺底深字版本相比，增加字距 +0.5px 並提高 1 級粗度 (補償視覺感知, impeccable/typeset)。
9. 字幕堆疊 (類似參考的緊密鎖定)
詞 → 行 → 堆疊的分組規則：
- HI (Playfair)：每行 1–2 詞，3 詞僅在急需強調時使用。
- CTX (小字 Inter)：每行 2–4 詞，偏好 3 詞。4 詞僅在短語完整時使用 (斷開會破壞意義)。絕不要讓 ctx 行為單詞 (與鄰近合併)。
- 每個堆疊 1–3 行 (靈活，不要強制 3)。
- 強調 (HI) = 句子核心短語；可位於任一位置。
- 連字號標記 ("binary-nya") = 1 個詞，不要斷開。
- 強調短語末尾的強調小品詞 (doang/aja/banget) = 自身為一行 HI。
- HI = 編輯決定 (閱讀句子意義)，而非啟發式評分。 詞語啟發式評分失敗 6 次 — 不要重蹈覆轍。
鎖定 CSS (緊密，不要鬆散)：
.row { line-height: 1.0 }，ctx 38px Inter 600，HI 84px Playfair italic 金色。.row.hi { margin: -2px 0 }— 貼合附著而不覆蓋降部。- HI 多詞一行；HI 僅在 2 個強短詞 (≤8 字元) 時拆分。
- 驗證：每個堆疊定格快照，確保無字形重疊。
10. FX 圖示動態預設 (13 種，位於 core.js sceneFile)
st.fx = {icon, anim, y?, size?, color?}。Lucide 圖示透過 assets/fx/icons.svg#fx-<名稱>。
持續時間 = 範圍堆疊；退出始終為淡出 + 縮小 0.3s。
| 預設 | 動作 | 迪士尼原則 | 適用於 |
|---|---|---|---|
pop | back.out 縮放 + 呼吸 1.06 | 超調 | 中性/預設 |
float | 上升 + 漂浮 ±18px | 緩慢進出 | 平靜、高級 |
shake | 水平震動 5 次 | 誇張 | 問題、警告 |
spin | 旋轉進入 -30° + 搖擺 | 弧線 | 驚喜、魔法 |
rise | 從下方滑入 expo | 佈置 | CTA、解決方案 |
elastic | 壓縮後彈性彈出 | 擠壓+預期 | 俏皮、鉤子 |
swing | 從側面進入 + 鐘擺擺動 | 弧線 | 合理、敘事 |
bounce | 落下 + 彈跳 + 擠壓 | 重力 | 掉落、驚喜 |
zoom | 模糊遠處 → 聚焦 + 慢推 | 佈置/深度 | 開場、揭示 |
pulse | 停留期間節律脈動 | 吸引力 | 關注、促銷 |
flip | 卡片 Y 軸 3D 旋轉 | 紮實繪畫 | 比較、卡片 |
draw | 閃爍 + 彈性穩定 | 佈置 | Logo、徽章 |
orbit | 旋轉進入 -90° + 搖擺 | 次要動作 | 科技、AI |
規則：1 個場景 = 1 個預設。根據情緒變化 (鉤子好奇 → 問題緊張 → 解決方案驚嘆 → CTA 轟鳴)。不要連續 2 個場景使用相同預設。
11. 字詞時間軸管線 (精確卡拉 OK)
時間來源：faster-whisper small, word_timestamps=True, CPU int8。
注意：若 av>=19，需修補 faster_whisper/audio.py (av.open 不含 metadata_errors)。
模糊匹配 whisper 標記 → 正式文字 (difflib 視窗 12, 閾值 0.5)；外來詞 (QRIS/Cures, rilis/release) 手動修補。
卡拉 OK 規則：所有 VO 詞都顯示 (僅合併 e-book/Tapsite.AI/VA)，每場景最多 3 行，場景間隔 ≤0.35s (自然停頓)。
驗證：每個場景的間隔審計 + 每個場景快照 vs VO 時間戳。
12. 長寬比佈局 (類似 CapCut)
比例 = 專案設定 (canvas: {w,h} 於 project.json)，不是每個剪輯的裁切。
更改比例 → 不要拉伸內容；重新映射位置 (分數) + 審計每個場景 (CapCut 原則："一次性更改框架，然後修復構圖")。
| 比例 | 畫布 | 安全區域 (x, y) | 用於 |
|---|---|---|---|
| 9:16 | 720×1280 | 70–650, 220–960 | Reels/TikTok/Shorts/Meta 垂直 |
| 4:5 | 864×1080 | 70–794, 140–900 | IG/FB 動態消息 (更寬敞) |
| 1:1 | 1080×1080 | 90–990, 180–900 | 動態消息正方形 |
| 16:9 | 1280×720 | 90–1190, 90–630 | YouTube/橫向 |
重新映射規則：pos 為每個比例儲存絕對值；更改比例時，以新尺寸的分數縮放 x 和 y，然後夾到新的安全區域。字體大小不隨之自動縮放 (每個比例的編輯決定)。
Fit/Fill/背景 (CapCut)：影片背景預設使用 cover (填滿，裁剪邊緣)；若主體被裁切 → 改用 fit + 背景模糊/顏色。