vox-style-animation

Vox 风格动画

一套用于呈现 Vox 编辑式拼贴动态图形风格的样式包，基于 HyperFrames（可从 HTML 渲染视频）。此技能包提供复现这种风格所需的配色、字体系统、动态表现、纹理系统，以及经过反复验证的流程规范；此外，references/capture-your-own-style.md 还介绍了如何将你看到的任何风格转化为自己的样式包。

两个承诺。（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 种色相，各自只承载一种含义

定义于 assets/brand-tokens.css。每种颜色只负责一种用途，这种规范能让设计显得有意为之，而非单纯装饰。

颜色	Hex	含义	用途
纸张奶油色	#f2ecdf	画布／页面	每个场景的背景
油墨黑	#161513	结构／叙述者的声音	字体、轮廓、描边
Vox 黄色	#ffd200	强调／荧光笔	每个场景中唯一的关键词
信号红	#e5483f	旧世界／代价／阻力／否定	划掉的方框、崩塌
钴蓝	#2f5fe8	新能力／取代旧事物的力量	新时代节点、流线

**规范检查：**红色和钴蓝不会在同一节拍中同时出现——只有一个例外：新旧碰撞的「转折」场景（这场碰撞本身就是故事）。

字体

• **标题／动感文字：**Archivo Black——平涂油墨，不用渐变、不加光晕。通过缩放和猛然出现来呈现冲击力，不要闪烁。line-height: 0.98，全大写。
• **编辑式说明文字／标签：**Inter 500/700。
• **边注：**Caveat，用于手写涂鸦——少量使用（每件作品 ≤2 处）。
• 强调手法：在文字后方添加黄色荧光笔划痕（使用真正的 .hl-block 元素，从左侧以 scaleX 0→1 的方式展开，时长为 0.45s，缓动为 power2.out），或添加红色删除线。绝不直接改变文字颜色——强调效果由标记实现。

纹理与深度（统一系统）

• 每个场景都添加纸张颗粒——纯 CSS 的三层 radial-gradient，无需 PNG。
• 将网点作为区块纹理（使用两种尺寸的 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）：

动效	一句话方案
纸片拍入	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

关键细节：荧光笔和所有伪视觉效果都必须是真实的 DOM 元素，不能使用 CSS ::before——GSAP 无法对伪元素进行补间动画。

结构规则

• 构建为子合成 compositions/s1…sN.html，每个都包含自成一体的 <template>、各自作用域内的 <style>，以及注册到 window.__timelines['<id>'] 的暂停状态 GSAP 时间轴。
• 在 index.html 中通过 data-composition-src + data-start / data-duration 串联它们（参见 assets/starter/）。
• 每条时间轴结尾都必须有一个时长锚点：tl.to({}, { duration: SLOT }, 0) ——即使动效已结束，也要让合成内容保持显示完整时长。
• 每个作品使用一个核心隐喻，并通过回调反复呈现（徽章反复出现、盒子折叠、节点回归）。
• **片尾停留 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. **为证据添加标注。**至少有一个节拍要用红笔标注真实材料（例如用阶梯式绘制效果粗略圈出一个数字）——标注展品，而不只是自己的标题。
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 — 可叠加到现有素材上的透明 Alpha 覆盖层（下三分之一字幕、动感强调效果），可在非线性编辑器中合成。

文件

• 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 同步的示例（使用此素材包构建的本仓库解说视频）。