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: <VO 開始時間> })，每句呼叫一次。對同一句只能使用.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 })。 - 在品牌吉祥物上繪製的嘴巴屬於新的美術作品：在發布任何包含該嘴巴的作品之前，必須獲得品牌擁有者的核准。
- 在說話時保持臉部生動：每 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 秒）。