我们加的一层 · a thin wrapper · originals stay at Index
Helios notes for Moss / 提市
This page does not rebrand Craft. Gustavo Fior's playground stays the product. We only map four of his beats onto the desktop chrome Moss / 提市 already ships: motion, hit areas, nested radius, and interruptible animation.
这一页不改名、不重做交互。原作者的概念页保持原样。我们只把其中四拍，对到 Moss / 提市桌面铬条（标题栏、工具栏、侧栏、嵌套面板）已经在做的事上。
Why these four · 为什么是这四拍
Desktop chrome is a stack of small, always-on surfaces. Users do not wait for a page load — they hover, miss, reverse, and click again. The original essays already encode that physics.
桌面铬条是一层永远在场的小表面。用户不会等页面加载，他们悬停、滑偏、反悔、再点。原文章已经把这套物理写好了。
01 · Title bar · toolbar · inspector actions
Button Press·按压缩放
Scale the control down on press so a toolbar, title-bar button, or tray icon feels physical — not a CSS flash.
按下时略微缩小，让工具栏、标题栏按钮或托盘图标有实体感，而不是一次 CSS 闪烁。
02 · Window controls · sidebar pins · status chips
Hit Areas·点击热区
Keep the glyph small; grow the invisible target. Dense desktop chrome fails when the 12px icon is the only hit box.
图标可以很小，热区必须更大。桌面密集铬条最容易死在「图标本身就是热区」。
03 · Nested panels · popovers · inset cards
Nested Border Radius·嵌套圆角
Inner radius = outer minus padding. Panels inside a window, cards inside a sidebar, chips inside a bar all share one curve family.
内圆角 = 外圆角 − 内边距。窗口里的面板、侧栏里的卡片、栏里的芯片应属同一套曲线。
04 · Hover menus · tab switch · icon morph
Interruptibility·可打断动画
Desktop chrome is hover-heavy. A sidebar, tab, or icon morph must change its mind mid-flight when the pointer leaves or a new target wins.
桌面铬条几乎全是悬停。侧栏、标签、图标变形必须能在指针离开或新目标出现时中途改主意。
Keep going · 继续看原作
The interactive demos live on the original routes. Start with Button Press, Icon Morph, Scroll Fades, or Stagger. Credit: Gustavo Fior / @heyimgustavo.
交互演示仍在原路径。不要从这里改它们。完整目录在 Index。