2D 角色动画
首先阅读品牌的吉祥物规则（brands/<slug>/README.md，吉祥物部分）。品牌吉祥物必须严格基于品牌自有文件绘制；切勿凭记忆重绘。
SVG 骨骼（无设计文件）
- 将角色绘制为内联
<svg>，使用品牌配色中的简单图形。命名部位：#body、#eyes、#mouth-closed、#mouth-open、#arm-l、#arm-r（可省略任意部位）。 const c = SvgRig(svgEl)然后链式调用：.idle(from, to)、.blink([t…])、.talk(from, to)、.wave(t)、.hop(t)。- 手臂以其所属矩形的内下角为轴心旋转。如果手臂摆出身体范围，请在手臂上设置
data-pivot="x% y%"。 - 播放配音：使用下一节的口型同步。若没有 Rhubarb，可使用简化的嘴唇拍动模式：单词起始时间由
scripts/transcribe.sh audio/vo.wav audio/vo生成，传入.talk(0, 0, { beats: [...] })。 - 复用：角色一旦获批，将其 SVG 保存至
brands/<slug>/assets/characters/并添加到品牌 README 中。
口型同步（角色朗读配音）
- 每句配音线索：
scripts/lipsync.sh audio/vo.wav audio/vo.visemes.json --dialog audio/vo.txt（使用 Rhubarb 口型同步；脚本内有安装说明）。使用批准的文字稿作为对话文件。时间单位为秒。 - 在合成画面中加载
<script src="../audio/vo.visemes.js">和<script src="/engines/lipsync.js">。 - **SVG 骨骼：**将嘴形绘制为
#mouth-A到#mouth-H，以#mouth-closed（或#mouth-X）作为静态嘴。A（嘴唇紧闭）、B（微张，露齿）、C（张开）、D（大张）、E（O 形）、F（OO 形）承担大部分口型；G（F/V 音）和 H（L 音）若未绘制则回退到 A 和 C。然后调用.lipsync(LipSync.cues("vo.visemes"), { offset: <配音开始时间> })，每句一行。对同一行不要同时使用.talk()和.lipsync()。示例参考examples/engines-demo/index.html。 - 仅以图片形式存在的吉祥物（品牌的 PNG 图片）：使用
LipSync.mountMouth(wrapper, { cx, cy, w, aspect, shapes: LipSync.mouthSet({ ink, cover }) })在图片上绘制嘴部（cover为面部颜色，在说话时隐藏图片自身的嘴部；静止时显示图片的嘴）。cx、cy、w为图片的比例分数：测量一次，在几个提示点检查静止帧，并将数值记录在品牌 README 中（吉祥物部分）。然后调用LipSync.addToTimeline(Studio.tl, cues, mouth, { offset })。 - 在品牌吉祥物上绘制的嘴部属于新 artwork：发布前必须经品牌所有者批准。
- 说话时保持面部生动：每 2-4 秒眨眼一次，重音词上微微点头。使用
LipSync.talking(cues, t, offset)判断角色是否正在说话。 - 质量检查：在提示点附近检查静止帧（每个嘴形是否与声音匹配？），然后完整听一遍混合画面。
规则及 3D 部分：engines/README.md，口型同步部分。
Lottie（设计文件）
使用 Studio.lottie(el, "/brands/<slug>/assets/lottie/<file>.json", { start, loop, speed })。在运行时之前加载 /core/node_modules/lottie-web/build/player/lottie.min.js。检查文件是否使用了 lottie-web 无法渲染的表达式或效果（渲染一帧，与设计师预览对比）。
Rive（设计文件）
使用 riveLayer(el, "/brands/<slug>/assets/<file>.riv", { animation | stateMachine, start, loop, inputs })（来自 engines/rive.js）。时间轴（animation）直接根据 t 设置姿态。状态机从 0 开始按帧率逐步推进，因此输入时间值：inputs: [{ at: 1.2, name: "wave" }, { at: 2, name: "mood", value: 2 }]（无 value 则为触发）。按两种顺序渲染几帧（先 --workers 1，然后 --workers 2 时间反转）并检查 md5 值是否匹配。examples/reel-layer/rive.html 是一个可运行的检查页面。
角色动画技巧
- 动作前要有预期（跳跃前轻微压缩），动作后要有回弹（
back.out动画曲线）。 - 每 2-4 秒不规则间隔眨眼。静止不动的角色看起来死气沉沉。
- 姿态持续时间要足够长以便阅读（手机上 ≥ 0.4 秒）。