一句话交给九个 Agent2026-11-11 · 12 分钟
Bruce 表情● one master, a whole skeleton
一张主图，
二十四种心情。
Bruce 没有被重画。主图在构建时被切成部件，挂上一棵骨骼树；耳朵、护目镜、徽章和舌头是弹簧骨骼，跟着头和身体自己甩起来。整段表演以 240 Hz 模拟，再烘焙成 CSS 关键帧：交付的只是一个 SVG 文件。
24个表情，四组产品场景
835条动画，7260 个关键帧
44.6 KB平均体积，gzip 后 11.2 KB
- 一个文件自己适应。系统要求减少动态时冻结在最有表现力的一帧，深色界面自动加冰蓝描边，44 像素以下隐藏细碎特效。
- 画廊里放的就是交付物。下面每一格都是
<img src="svg/….svg">，不是为预览另写的版本。 - 在两个内核里核对过。Chrome 和 WKWebView（Tauri 窗口的内核）对同一文件按时刻取帧，逐格比较。
庆祝
Celebrate0.00 s
手写的主动作弹簧骨骼（模拟得出）特效每个刻度是一个关键帧，×n 是子循环
01 gallery
二十四个表情
点任何一格，把它放到上面的舞台里：拖时间轴、放慢到四分之一、打开骨骼。只有进入视野的格子在播放。
等待 · 过程循环播放，不回到静止姿态：等多久都不会看到重复的「开始」
祝贺 · 正向一次性的表演，从主图出发，回到主图
反应 · 情绪对结果的回应：意外、疑惑、出错、拒绝
内容 · 插画写作、灵感和休息，给文档与博客用
02 one file adapts
一个文件，自己适应
动画是 CSS 写的，所以文件能读到系统设置；URL 片段则让宿主强制指定。不需要另备一套深色文件或静止帧。
默认
循环播放。系统打开「减少动态效果」时，自动冻结在静止帧。
<img src="svg/celebrate.svg">
#still
最有表现力的一帧，用作缩略图和静态配图。不认识 CSS 动画的渲染器看到的也是这一帧。
<img src="svg/celebrate.svg#still">
#dark
主图是藏青色剪影，深色底上会消失。冰蓝描边跟着骨骼一起动；跟随系统时自动出现，也可以强制。
<img src="svg/celebrate.svg#dark">
#once
播一遍停住。
<img src="svg/celebrate.svg#once">
片段可以组合：#dark-still、#light-still、#dark-once、#light-once，#light 则强制不加描边。
03 sizes
从 128 到 32 像素
64 像素以上表情完整可读；44 像素以下文件自己隐藏细碎特效，只留下主体的表演。16–20 像素的工具栏位置请继续使用单色的 brand/bruce-agent.svg。
12896644832
12896644832
1289664483204 in the product
放进产品里
等待、祝贺、出错和内容插画，各取一个放在它该出现的位置。
等待 · 对话
正在梳理这次改动读了 14 个文件
正在运行测试pnpm test · 第 3 步祝贺 · 通知
已提交 2e178523 个文件 · 测试全部通过
发布完成两个地区已切换到新版本出错 · 空状态
没找到这个文件，换个名字试试？内容 · 博客
一句话交给九个 Agent2026-11-11 · 12 分钟
长任务怎么等休息一下，回来再看05 how it is made
怎么做出来的
主图装上骨骼
构建时读取 brand/bruce-head.svg，用裁切区域把它切成身体、头、两节耳朵、下颌、眼、护目镜和徽章，挂到一棵骨骼树上。静止时画出来的就是主图。
主动作手写，次级动作模拟
关键姿态加缓动写出预备、过冲和挤压拉伸；耳朵、护目镜、徽章、舌头是弹簧骨骼，由父骨骼的运动推着走，拖尾和回弹不用手调。
烘焙成最短的关键帧
每条通道拟合成分段曲线，用最短路径选出字节数最少的一组关键帧；误差不超过 0.8 个画布单位（512 像素下约 0.27 像素）。重复的节拍只烘焙一次，作为子循环播放。
检查交付的文件
结构测试逐条检查浏览器会静默丢弃的错误；再用 Chrome 和 WKWebView 加载 svg/ 里的成品，按时刻取帧比较。
| 检查 | 结果 |
|---|---|
结构测试（node --test） | 148 项通过：关键帧、缓动、id、引用、循环闭合、画布边界、体积 |
| 静止姿态对主图（Chrome，1024 px） | 465 个像素的差异超过 12%，占全图 0.044% |
| 循环首尾帧（Chrome，交付文件） | 24 个表情全部闭合，最大差异 0 个像素 |
| Chrome 对 WKWebView | 每帧最多 9 / 40000 像素不同（0.02%） |
<img> 内的行为 | 两个内核里都在播放；#still 冻结、#dark 加描边；系统「减少动态效果」打开时冻结在静止帧 |