Logo

线上的标志「演进（校准缺口）」和换标之前的旧标志。标志自己演出一套状态：出场、播放中、加载中、思考中、成功、失败， 以及 hover / 按下。动画全部是 SVG + CSS。这一页的状态是手动点的；线上什么时候切到哪个状态见下面每个状态的说明。

系统开了「减弱动态效果」时，标志不做位移和旋转，姿态直接切换，循环状态改成明暗脉动。

新旧对比

每一格都在自动演示。点一行切到那一枚的细节。

标志组合静止出场播放中加载中思考中成功失败
旧标志
线上 · 演进（校准缺口）

线上 · 演进（校准缺口）

还是那枚中心留空的 X：四笔加长、缺口校准到 16px 下三个白像素，所有状态都由这四笔变出来，缺口里什么都不放。

  • 四笔线宽 3、随尺寸缩放，内端退到 8.2 格：先读成「中心断开的 X」，不是四个斜点，也不是关闭叉。
  • 播放：四笔立起来，成为沿中线上下对称的四根声波条。加载：四笔转成切向短划，绕着空心追逐。
  • 思考：流光。四笔位置不动，一道明暗沿对角线扫过去，歇一小拍，再沿另一条对角线扫回来；和「Thinking…」文字上的流光是同一种语言。
  • 成功：右上、左下两笔滑到一条线上接上缺口，并成一道勾。失败：上两笔并成一竖、下两笔收成一点，是感叹号。
  • 字标加粗到字高的 13%，组合为标志 24 / 间距 8 / 字标高 16，标志与字标重量对上。

已知弱点

  • 识别度提升有限：16px 下仍是四个短斜划围着空心，带一点「收起 / 退出全屏」图标的影子；笔画比旧标志更细。
  • 红底白标的 16px 底板上，它像一个细的关闭 / 删除按钮。
  • 成功的勾、失败的感叹号、加载的四段环，单独截一帧都是通用图形，认不出是 Lacuna；家族感来自变形的过程。
  • 加载在 16px 深色底上最淡的两段偏弱。
  • 成功 / 失败回到静止时，换色中途有一两帧发灰的颜色；失败退出约 150ms 处有一帧像「V 加两点」。
  • 思考只有四笔可用，光被切成三步：进来和出去的那一下只有一笔在变，单看那一帧是「有一笔淡了」，连起来才是扫过；中间一对同时最淡的约 150ms 里只有一条斜划是满亮度的。

状态舞台

选一个状态看它怎么从静止变过去；成功 / 失败 / 出场播完会自己回到静止。可以放慢看细节。

速度

静止：四笔静止，中心留空。

把指针移到任意一块表面上看 hover，按住看按下：hover 时四笔各沿自身方向外移 0.8 格，缺口张开；按下时整体缩到 0.92。

全状态并排

七个状态同时演示，看它们是不是同一个东西在变。

静止
出场
播放中
加载中
思考中
成功
失败
静止
出场
播放中
加载中
思考中
成功
失败

尺寸

14px 到 64px。16px 是 favicon 和侧边栏的尺寸，最容易读成别的东西。

品牌红
14
16
20
24
28
32
48
64
单色
14
16
20
24
28
32
48
64
弱化
14
16
20
24
28
32
48
64
品牌红
14
16
20
24
28
32
48
64
单色
14
16
20
24
28
32
48
64
弱化
14
16
20
24
28
32
48
64

导航栏与播放器

标志跟着全局状态走：点播放它进入播放中；跳转、任务完成、任务失败各演一次。标志上可以 hover。

CreateToolsPricing

Midnight Drive

已暂停

CreateToolsPricing

Midnight Drive

已暂停

浏览器标签与图标底板

上一排是有色底板（底色跟着状态走、标志保持白色），下一排是现行的浅灰底板。后面是放大的底板。

Lacuna
Generating… — Lacuna
Your song is ready — Lacuna
Generation failed — Lacuna
Lacuna
Generating… — Lacuna
Your song is ready — Lacuna
Generation failed — Lacuna

通知与过程提示

任务完成 / 失败的站内通知，以及 Agent 思考、加载这两种等待。

Your song is ready

Midnight Drive · 2 versions

Generation failed

Credits were refunded

Drafting your response…
Thinking…
Loading…

Your song is ready

Midnight Drive · 2 versions

Generation failed

Credits were refunded

Drafting your response…
Thinking…
Loading…

还没处理的问题

定稿之后再处理的事。

  • 动画只在离线的定格图里核对过：缓动手感、真实 hover / 按下、「减弱动态效果」都还没有在浏览器里看过。Safari 16.4 / Firefox 115 下 SVG 内部元素的独立变换属性（translate / rotate / scale）和近零长度的圆头线没有实测。
  • 循环状态（播放中 / 加载中 / 思考中）在周期中途退出时，会先跳到该状态的起始姿态再走退出动画：纯 CSS 拿不到当前相位。聊天里的思考提示是直接换成回复内容，不走退出。
  • 只做了「静止 ↔ 各状态」的过渡。加载中直接切到成功这类非静止状态之间的切换，会先跳回静止姿态。
  • 深色底上失败态的红偏暗：--destructive 的深色值是按按钮填充定的。定稿时要么加一个给图形用的危险红 token，要么失败态不换色、只靠形状。
  • 成功 / 失败的换色走颜色过渡，中途会有一两帧混出来的灰褐色。
  • 都没有做 16px 以下的专用版本：favicon 底板只是把同一枚标志放进圆角方里。