Bruce · Emotion Lab qwen4-max-preview · default effort

表情矩阵

12 states 布鲁斯飞行员 · 原生矢量 SMIL 动画 · 点击卡片进入聚光台
Bruce · 待命 / Idle空闲头像、列表默认态：安静呼吸，偶尔眨眼，护目镜闪过一道光。 循环 4s，SMIL 矢量动画，无脚本、无外部资源。
待命Idle4s
默认头像

空闲头像、列表默认态：安静呼吸，偶尔眨眼，护目镜闪过一道光。

待命 16px16待命 24px24待命 48px48
Bruce · 思考 / ThinkingAgent 推理、长任务等待：歪头、眼睛向上看，紫色问号气泡逐颗点亮。 循环 3.2s，SMIL 矢量动画，无脚本、无外部资源。
思考Thinking3.2s
等待推理

Agent 推理、长任务等待：歪头、眼睛向上看，紫色问号气泡逐颗点亮。

思考 16px16思考 24px24思考 48px48
Bruce · 干活 / Working执行任务、写代码：护目镜甩下罩住眼睛（招牌动作），代码符号漂浮，打字点跳动。 循环 3.6s，SMIL 矢量动画，无脚本、无外部资源。
干活Working3.6s
执行编码

执行任务、写代码：护目镜甩下罩住眼睛（招牌动作），代码符号漂浮，打字点跳动。

干活 16px16干活 24px24干活 48px48
Bruce · 雷达 / Radar网络等待、扫描加载：飞行员的本行——雷达环旋转扫描，光点依次 ping。 循环 2s，SMIL 矢量动画，无脚本、无外部资源。
雷达Radar2s
等待加载

网络等待、扫描加载：飞行员的本行——雷达环旋转扫描，光点依次 ping。

雷达 16px16雷达 24px24雷达 48px48
Bruce · 搜索 / Searching文件/代码搜索：小狗嗅探——头部左右快速摆动，鼻头闪光，气味线飘散。 循环 2.6s，SMIL 矢量动画，无脚本、无外部资源。
搜索Searching2.6s
检索好奇

文件/代码搜索：小狗嗅探——头部左右快速摆动，鼻头闪光，气味线飘散。

搜索 16px16搜索 24px24搜索 48px48
Bruce · 庆祝 / Celebrate任务完成、发布成功、祝贺：四段衰减跳跃 + 挤压拉伸，星星眼，六色纸屑炸开。 循环 2.8s，SMIL 矢量动画，无脚本、无外部资源。
庆祝Celebrate2.8s
祝贺完成

任务完成、发布成功、祝贺：四段衰减跳跃 + 挤压拉伸，星星眼，六色纸屑炸开。

庆祝 16px16庆祝 24px24庆祝 48px48
Bruce · 搞定 / Done成功确认、检查通过：满足地眯眼微笑，绿色对勾画出，紫色徽章脉动。 循环 3s，SMIL 矢量动画，无脚本、无外部资源。
搞定Done3s
成功确认

成功确认、检查通过：满足地眯眼微笑，绿色对勾画出，紫色徽章脉动。

搞定 16px16搞定 24px24搞定 48px48
Bruce · 比心 / Love点赞、感谢、收藏：害羞歪头 + 脸颊泛红，爱心瞳孔，三颗爱心飘起。 循环 3.2s，SMIL 矢量动画，无脚本、无外部资源。
比心Love3.2s
感谢喜爱

点赞、感谢、收藏：害羞歪头 + 脸颊泛红，爱心瞳孔，三颗爱心飘起。

比心 16px16比心 24px24比心 48px48
Bruce · 委屈 / Sad出错、失败、断线：小乌云压顶下雨（飞行遇气流），耷拉眼皮，一滴眼泪滑落。 循环 3.4s，SMIL 矢量动画，无脚本、无外部资源。
委屈Sad3.4s
错误安抚

出错、失败、断线：小乌云压顶下雨（飞行遇气流），耷拉眼皮，一滴眼泪滑落。

委屈 16px16委屈 24px24委屈 48px48
Bruce · 休眠 / SleepAgent 休眠、离线、深夜模式：闭眼深呼吸，Zzz 依次升起，星星眨眼。 循环 4.5s，SMIL 矢量动画，无脚本、无外部资源。
休眠Sleep4.5s
空闲离线

Agent 休眠、离线、深夜模式：闭眼深呼吸，Zzz 依次升起，星星眨眼。

休眠 16px16休眠 24px24休眠 48px48
Bruce · 警觉 / Alert警告、需要注意：吓一跳弹起，瞳孔收缩，琥珀色感叹号弹出并扩散警示环。 循环 2.2s，SMIL 矢量动画，无脚本、无外部资源。
警觉Alert2.2s
警告提醒

警告、需要注意：吓一跳弹起，瞳孔收缩，琥珀色感叹号弹出并扩散警示环。

警觉 16px16警觉 24px24警觉 48px48
Bruce · 起飞 / Launch发布上线、部署、博客插画：布鲁斯升空——速度线、尾流云团、高度星闪烁。 循环 3s，SMIL 矢量动画，无脚本、无外部资源。
起飞Launch3s
发布博客

发布上线、部署、博客插画：布鲁斯升空——速度线、尾流云团、高度星闪烁。

起飞 16px16起飞 24px24起飞 48px48

动效规范

Motion Spec · 供产品各角落嵌入时对齐

色板 · 品牌原色 + 语义色

缓动 · SMIL keySplines 预设

SMIL 的 keySplines 控制点必须在 [0,1] 内，过冲（弹簧感）不靠曲线而靠关键帧值序列：先冲过目标再回落。

节奏表

表情循环标签场景

尺寸阶梯 · idle 为例（独立文件 <img> 加载）

16px 用于行内状态点，24–48px 用于列表与按钮，64–128px 用于空态与等待页，256px 原尺寸用于祝贺弹层与博客插画。深色底自动带冰蓝轮廓光（rim light），浅色底轮廓光隐入背景。

嵌入指南

Embed · 零依赖，SMIL 在 <img> 与内联两种形态下都播放

1 · 作为图片（推荐，天然隔离渐变 ID）

<!-- SMIL 动画在 img 中正常播放（WebKit / Chromium），无需 JS -->
<img src="brand/emotion/qwen4-max-preview-default/stickers/celebrate.svg"
     width="96" height="96" alt="任务完成，布鲁斯庆祝"/>

2 · 内联（需要程序控制时）

// 每个文件的渐变/裁剪 ID 都带表情前缀（idle-、celebrate-…），多枚内联不冲突
const svg = document.querySelector('svg[data-sticker="radar"]');
svg.pauseAnimations();          // 暂停
svg.setCurrentTime(1.2);        // 精确到帧 scrub
svg.unpauseAnimations();        // 继续

3 · 尊重系统「减少动态」

if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.querySelectorAll('svg.bruce-emotion')
    .forEach(s => { s.pauseAnimations(); s.setCurrentTime(0); });
}

注意：CSS 的 animation-play-state 管不到 SMIL；减少动态必须走 pauseAnimations()。本页控制台已内置该开关，并在系统偏好开启时自动暂停。

4 · 场景对照

产品角落推荐表情
Agent 等待 / 推理thinking radar working
任务完成 / 发布祝贺celebrate done launch
出错 / 断线安抚sad alert
空闲头像 / 离线 / 深夜idle sleep
点赞 / 感谢 / 收藏love
博客插画 / 空态launch searching celebrate（256px 原尺寸）