READMESource: main@91792ac3
流光 · dsh-fleeting-light
让界面安静地活着。
光标停在那里,界面一动不动。流光让这一刻不再死寂:一圈光沿着窗口的圆角缓缓绕行,一条细带沿着输入框奔跑,粉、紫、蓝、青一路走到琥珀,4.4 秒一整圈;明暗每 2.6 秒起伏一次。
它不打断你。只是让机器看起来还在呼吸。
它做了什么
- 整窗环境光 —— 沿卡片超椭圆圆角走一整圈的底光,内外两层:紧贴边缘的锐光 + 外圈的雾面弥散。四角按圆率精确挖空,不会漏白边。
- 输入框跑马光 —— 一条绕输入框奔跑的彩带,头尾在 45° 内收到 0:不是一条等粗亮线突然截断,而是真的渐细、渐隐、消失。
- 色彩同步 —— 底光、跑马灯、雾光共用同一张「角度 → 色相」表。光转到同一个位置,三层的颜色就是同一个。不会出现"跑马灯永远是紫色"这种各转各的。
- 呼吸感 —— 整层 2.6s 明暗脉动,雾光再叠一层 4.6s 错相呼吸。静止时也在缓慢流动。
- 玻璃透光 —— 边缘高光描边 + 内嵌亮边,光是从卡片边缘透出来的,不是浮在表面。
两个开关,互不打扰
设置 → 通用:
| 开关 | 管什么 | 存储键 |
|---|---|---|
| 整窗环境光 | 窗口四周的底光与雾光 | dsh-fleeting-light:enabled |
| 输入框流光 | 输入框边缘的跑马灯与柔光 | dsh-composer-light:enabled |
每组各带一个「预览」开关,可以在设置页里直接对比开/关。默认都是开的;关掉后立刻 cancelAnimationFrame,不残留定时器。
为什么它不卡
- 纯浏览器端:一个
client.js,宿主端只有一个空的apply。 - 每帧只改三个 CSS 变量(角度、光带角宽、雾带角宽),DOM 结构一次都不动。
- 固定 60fps 的 rAF,一圈 4400ms 线性推进,转速恒定。
- 全程
pointer-events:none+aria-hidden,不抢焦点、不挡点击、不进读屏。 - 系统开了
prefers-reduced-motion时,只画一帧静态光,不转。 - 明暗主题自动各调一档不透明度。
安装
从 DSH 插件市场搜「流光」,或:
npm i dsh-fleeting-light
装完如果光没出现,刷新一次页面(浏览器端模块要重新加载)。
兼容性
在 DSH 0.2.1-rc.3(桌面端 Web UI)上验证。package.json 的 engines.dsh 写的是 >=0.2.1-rc.1 <0.3.0-0,超出这个范围市场会标记为未验证。
许可
MIT © 2026 QiaoSchoco
No comments yet. Be the first to write one.