dsh-aurora-bg:给 DSH Web UI 换上 DeepSeek 官网风格的动态极光背景

前言

用 DSH 做智能体开发时,dsh web 是最常开的界面之一,但默认的背景样式比较朴素,长时间对着看容易乏味。想给 Web UI 加一些视觉上的个性化,通常需要自己改前端代码,门槛和维护成本都不低。

dsh-aurora-bg 解决的就是这个问题:它把 DeepSeek 官网首页那种「深蓝流体底色 + 极光光斑 + 点阵鲸鱼」的动态背景做成一个 DSH 插件,装上、重启,背景自动生效,不用改 DSH 本身的代码。

这是什么

dsh-aurora-bg 是一个 DeepSeek Harness(DSH)Web UI 背景插件,由 KUNTING0701 维护,当前版本 1.0.2,采用 MIT 许可证。它的定位一句话概括:DeepSeek 官网风格动态极光背景插件 for DSH Web UI。

实现上是纯 CSS transform + SVG 粒子,无 WebGL、无持续 canvas 动画、无 mask、无 blur,资源占用低,兼容性稳。

从 package.json 可以看到,插件的客户端平台声明为 webdsh.client.platform),主入口是 lib/index.js,客户端文件是 lib/client.js,打包补丁为 ./cordis.patch.yml

核心功能

六层背景

背景由六个独立动画的层组成:远/近双层网格视差、蓝紫光斑、金色反转层、顶部暖光、细密快转层。各层转速与方向不同——金色层反转、细密层快速公转,制造「流体涌动」感,并带有 scale 呼吸动画。

其中双层网格视差的设计是:远层网格 92px、小视差,近层网格 46px、大视差,鼠标移动时两层位移幅度不同,产生立体景深。

点阵鲸鱼

这是插件的视觉重心,复刻了官网 hero-whale 的效果:由小点点组成的鲸鱼图案,粒子来自对官网原版 SVG path 的采样,按 60×60 亮度图取内部粒子。

鲸鱼带一组动态效果:

  • 组装动画:粒子从散落点飞向鲸鱼形状,2.5s 缓动凝聚
  • 尾部游泳摆动:朝向尾部传播的波浪
  • 环形波纹:从中心向外扩散
  • 鼠标斥力:鼠标靠近时粒子被三次衰减力推开,并带噪声角旋转绕行,官网参数为 radius 4.9 / strength .8 / distort 5
  • 3D 光照:亮度在 0.28x ~ 2.79x 之间随粒子与光源的距离变化,光源跟随鼠标,参数为 range 14 / shadeMin .28 / shadeMax 2.79 / followX 1.05
  • 粒子闪烁、整体慢旋 + 呼吸浮动

安装与启用

推荐直接从 GitHub 安装,也可以用本地构建的 tarball:

# 从 GitHub 安装(推荐)
dsh plugin --profile web add https://github.com/KUNTING0701/dsh-aurora-bg/archive/refs/tags/v1.0.2.tar.gz

# 或从本地构建的 tarball 安装
dsh plugin --profile web add /path/to/dsh-aurora-bg-1.0.2.tgz

安装后必须重启 dsh web,背景才会生效。重启后可以在 设置 → 插件 → 插件列表 中看到 dsh-aurora-bg 条目,状态为已启用 · 已挂载。

卸载

dsh plugin --profile web remove dsh-aurora-bg

卸载后同样需要重启 dsh web

微调

插件没有提供独立配置项,微调方式是直接修改 lib/client.js 源码,主要改三处:

1、顶部 CSS 常量:光斑颜色与浓度、网格密度,以及鲸鱼位置(.dsh-whaleright/top/width

2、背景层 anim 数组:每层各有一个参数对象,字段含义如下:

字段 含义
r 旋转角速度 rad/s(负值=反向)
f1/f2 漂移频率
a1/a2 漂移幅度 px
p/q 鼠标视差强度
s scale 呼吸幅度

3、鲸鱼动态参数:sampleWhale() 的采样分辨率(S=60)、鼠标斥力(4.9 / .8 / 5)、光照(14 / .28 / 2.79)、loose 抖动幅度

改完保存后重启 dsh web 即可看到效果。

适用场景与注意

这个插件适合两类人:一是日常使用 dsh web、希望界面更接近 DeepSeek 官网观感的开发者;二是想参考「纯 CSS transform + SVG 粒子」实现复杂动态背景的同行——它没有用 WebGL 和持续 canvas 动画,实现思路本身有参考价值。

使用前注意两点:

1、插件以当前 dsh 进程的权限运行,安装前建议先浏览一遍源码(核心逻辑集中在 lib/client.js),确认没有问题再装。许可证为 MIT,README 与 package.json 均有标注。

2、无论安装、卸载还是修改 lib/client.js 之后,都需要重启 dsh web 才会生效。

整体来看,dsh-aurora-bg 把一个纯装饰性需求做成了一个即装即用、改动范围可控的插件,符合 DSH「一切皆插件」的思路。如果你想要一个低资源占用、视觉完成度高的 Web UI 背景,可以直接试试。

  • 社区目录页:https://www.skillhub.cn/plugins/KUNTING0701/dsh-aurora-bg
  • GitHub 仓库:https://github.com/KUNTING0701/dsh-aurora-bg
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

Xiaoye