Reels Typo 风格（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 广告 9:16）。
1. 背景类型 — 何时使用哪种
| 类型 | 帧 | 使用时机 | 背景值 | 文字颜色 |
|---|---|---|---|---|
| 素材-暗化 | 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) |
| 纯色-蓝 | 01,05,06,07,18,20 (6×) | 概念、定义、列表、静修/促销信息 | #1D58FA 纯色 | 白色；衬线字体在关键见解处可用金色 #FFD98A |
| 插图-草图 | 00,04,09,13,17,22,28 (7×) | 素材无法展示的抽象概念（含义、大脑、框架、CTA） | 白色 #FDFBFC + 蓝色线稿 SVG | 衬线蓝色 #1D58FA，无衬线黑色 #111111 |
决策规则：如果一行文字描述的是感受或问题 → 素材-暗化。如果描述的是概念或事实 → 纯色-蓝。如果描述的是无形的东西（思想、含义、系统） → 插图-草图。
2. 构图 — “大衬线 + 小无衬线”
每个屏幕 = 1 个主角词 + 2–5 个小词，最多 6 个词：
[sans kecil, Inter 500, ~30px]
[SERIF RAKSASA — Playfair italic/semibold, ~90-150px]
[sans kecil nyempil di kaki/descender serif]
- 大小比例 小:主角 ≈ **1:3**。
- 小词与衬线词重叠（藏于升部/降部处），绝不放在分隔很远的不同行。
- 居中对齐，垂直居中。每屏最多一个重音词。
- 强调色：金色 `#FFD98A`（见解），蓝色 `#1D58FA`（CTA/静修），粉色 `#E5488F`（重要性，罕见）。
3. 运动语言
- 小词：淡入 + 上升 8px，0.15 秒，交错 0.1 秒。
- 主角衬线：模糊(12px) + 缩放(1.15) → 清晰，0.3 秒
expo.out。 - 切换：背景层之间硬切；字幕在边界处淡出 0.2 秒。
- 场景持续约 1–1.5 秒每屏；文字落地后绝不再动画。
- 草图 SVG：线稿使用
stroke-draw（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。 - 主角衬线 >80px：每行最多 8–10 个字符；超出则换行。
- 小无衬线：每行最多约 28 个字符。
- 验证：每个场景截图 → 叠加红色矩形 (70,220,650,960) → 不允许任何文字接触边框。
6. 文字–对象布局（3 种模式，见 examples/）
原则：文字和对象始终靠近，绝不漂浮过远。文字紧贴或覆盖对象。
| 模式 | 示例 | 规则 |
|---|---|---|
| 覆盖（文字在对象之上） | text-over-object.png：“你可以理解这些想法” 位于草图头顶 | 文字在 y220–500，对象在 y500–960。文字–对象间距 ≤80px。文字先出场（主角落地），然后对象绘制/弹出 — 视线从文字下降到对象。 |
| 并列（文字与对象并列） | text-beside-object.png：“你需要跳出常规” 与跑步者并列 | 文字垂直居中对齐对象。适用于水平/细长物体。文字可覆盖 10–20% 的对象区域（需添加发光效果以保可读性）。 |
| 塞入（小词塞入） | tuck-tight.png：“不要等待 / 热情 到来。 / 热情到来 / 在你开始之后。” | 小词紧贴主角的升部/降部（负边距 -8 到 -16px）。在视觉上形成一行，而非分隔很远的不同行。 |
各模式对应的运动：
- 覆盖：文字落地 → 对象从下方绘制（
strokeDashoffset，0.9 秒）或back.out(2)弹出。顺序：主角 → 对象 → 小词。 - 并列：对象（素材）先慢速缩放，文字猛击/冲入覆盖。文字必须有强
text-shadow。 - 塞入：主角落地，小词随后延迟 0.1–0.2 秒淡入+上升。绝不要在小词之前动画化主角 — 主角是锚点。
7. 跟读（漂移 → 冲击 → 滑动至中心关键词）
来源：IG Reels @/p/DSEgFPnAW-P。最终模型：河流从一开始就存在，
在重音词处突然冲击，滑向中心关键词。
4 阶段结构：
- 漂移 + 揭示（0 → T-重音） — 从一开始就进行柔和的放大/漂移
（scale 1→1.5，y +120→-40，x 0→80，
power1.inOut）+ 每个词fromTo不透明度/y/模糊在其 VO 时间戳处，0.35 秒power3.out。带.lit发光 0.4 秒。 过去的词在 0.8 秒内淡至 .35。 - 冲击（T-重音，0.45 秒，
expo.out） — 突然放大至约 2.2 + 河流移动 以便重音词位于画布中心。其他块被推出去 — 这是正确的效果。 - 滑动（0.9 秒，
power3.inOut） — scale → 2.6 + 河流 x 持续滑动 至关键词中心：x = -(jarak-kata-dari-tengah × scale)。单一动画。 - 保持 + 闪光 — 保持关键词居中。3 帧闪光 青色
#7DD3FC→ 奶油色#FEF3C7→ 紫色#C4B5FD，0.1 秒，收尾。
安全区例外：阶段 2–4 有意溢出（§5 不适用）。
选择退出：在河流上设置 data-layout-allow-overflow。
必需输入：每个词的 VO 时间戳。无 VO 时：估计 0.3–0.4 秒/词（需标记）。
8. 字体搭配（强制遵守，源自技能 impeccable/typeset）
核心规则：每个视频最多 2 个字体族。仅当第二个字体族能承担第一个无法完成的功能时才可引入。不要在同一屏内混合 >2 个字体族（= 失败，看起来业余）。
默认搭配（在 Video-1 + IG Reels 中验证）：
- 正文/小字：Inter 500/600，tracking -1px。通过字重 + 字号建立层次。
- 重音/主角：Playfair Display italic 600，tracking -2px，金色
#FFD98A。
对比度仅通过：字重（500→600）、字号（46→130px）、颜色（白→金）、 样式（正体→斜体）。而非通过每行更换字体族。
替代搭配（1 个视频 = 1 种搭配，不要混合）：
- 沉重/海报：Inter + Archivo Black (-3px)。 - 科技：Sora + Sora Bold。
- 编辑：Manrope + DM Serif。 - 压缩：Sora + Oswald (+1px)。
亮底暗字：相比暗底亮字版本，增加 tracking +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。
- HI = 编辑决策（阅读句子含义），而非启发式分数。 单词评分启发式已失败 6 次 — 不要重蹈覆辙。
锁定 CSS（紧凑，不要松散）：
.row { line-height: 1.0 }，ctx 38px Inter 600，HI 84px Playfair italic 金色。.row.hi { margin: -2px 0 }— 紧贴而不压到降部。- HI 多词一行；HI 拆分仅用于两个强短词（≤8 字符）。
- 验证：每个堆叠保持帧截图，确保无字形重叠。
10. FX 图标运动预设（13 种，位于 core.js sceneFile）
st.fx = {icon, anim, y?, size?, color?}。通过 assets/fx/icons.svg#fx-<名称> 使用 Lucide 图标。
停留时间 = 堆叠范围；退出时始终为淡出+缩小 0.3 秒。
| 预设 | 运动方式 | 迪士尼原则 | 适用于 |
|---|---|---|---|
pop | back.out 缩放 + 呼吸 1.06 | 超越 | 中性/默认 |
float | 上升 + 悬浮 ±18px | 慢入慢出 | 平静、高级 |
shake | 水平振动 5 次 | 夸张 | 问题、警告 |
spin | 旋转进入 −30° + 摇摆 | 弧线 | 惊喜、魔法 |
rise | 从下方滑入 expo | 舞台设置 | CTA、解决方案 |
elastic | 压缩然后弹性弹回 | 挤压+预期 | 好玩、钩子 |
swing | 从侧面进入 + 钟摆摆动 | 弧线 | 合理、叙事 |
bounce | 落下 + 弹跳 + 挤压 | 重力 | 掉落、惊喜 |
zoom | 远处模糊 → 焦点 + 慢推 | 舞台设置/深度 | 开场、揭示 |
pulse | 保持期间有节奏地脉动 | 吸引力 | 注意力、促销 |
flip | 3D 卡片 Y 轴旋转 | 扎实绘图 | 比较、卡片 |
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）。
模糊匹配 token whisper → 官方文本（difflib 窗口 12，阈值 0.5）；外来词（QRIS/Cures，rilis/release）手动修补。
卡拉 OK 规则：VO 的所有单词都显示（仅合并 e-book/Tapsite.AI/VA），每场景最多 3 行，场景间间隔 ≤0.35 秒（自然呼吸停顿）。
验证：审计每个场景间隔 + 每个场景截图与 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，然后钳制到新安全区。字号不跟随自动缩放（每个比例的编辑决策）。
适应/填充/背景（CapCut）：素材 BG 默认使用 cover（填充，裁剪边缘）；若主体被裁切 → 改用 fit + 背景模糊/颜色。