Preface¶

When developing agents with DSH, dsh web is one of the most frequently opened interfaces. However, the default background style is quite plain, and staring at it for a long time can become monotonous. To add some visual personalization to the Web UI, one usually has to modify the frontend code themselves, which has a high barrier to entry and maintenance cost.

dsh-aurora-bg solves this problem: It takes the dynamic background from the DeepSeek official homepage—characterized by a “deep blue fluid base color + aurora spots + dot-matrix whale”—and turns it into a DSH plugin. Once installed and restarted, the background takes effect automatically without needing to modify DSH’s core code.

What is this¶

dsh-aurora-bg is a DeepSeek Harness (DSH) Web UI background plugin maintained by KUNTING0701. The current version is 1.0.2 and it is licensed under MIT. In a nutshell, it is a DeepSeek official website style dynamic aurora background plugin for DSH Web UI.

Implementation-wise, it uses pure CSS transform + SVG particles, with no WebGL, no persistent canvas animation, no mask, and no blur. It has low resource usage and stable compatibility.

From package.json, we can see that the plugin’s client platform is declared as web (dsh.client.platform), the main entry point is lib/index.js, the client file is lib/client.js, and the packaging patch is ./cordis.patch.yml.

Core Features¶

Six-Layer Background¶

The background is composed of six independent animation layers: dual-layer grid parallax (far/near), blue-purple spots, gold reverse layer, top warm light, and fine fast-rotating layer. Each layer has a different rotation speed and direction—the gold layer reverses, and the fine layer rotates quickly, creating a sensation of “fluid surging” along with a scale breathing animation.

The design of the dual-layer grid parallax is: the far layer grid is 92px with small parallax, and the near layer grid is 46px with large parallax. When the mouse moves, the displacement amplitude of the two layers differs, creating a sense of stereoscopic depth.

Dot-matrix Whale¶

This is the visual focal point of the plugin, replicating the effect of the official site’s hero-whale: a whale pattern made of small dots. The particles are sampled from the original SVG path of the official website, taking internal particles based on a 60x60 brightness map.

The whale comes with a set of dynamic effects:

• Assemble animation: Particles fly from scattered points to the whale shape, coalescing with a 2.5s easing.
• Tail swimming oscillation: Waves propagating towards the tail.
• Ring ripples: Spreading outwards from the center.
• Mouse repulsion: When the mouse gets close, particles are pushed back by a three-stage decay force, accompanied by noise-based angular rotation around the mouse. The official website parameters are radius 4.9 / strength .8 / distort 5.
• 3D lighting: Brightness changes between 0.28x and 2.79x depending on the distance between the particle and the light source. The light source follows the mouse, with parameters range 14 / shadeMin .28 / shadeMax 2.79 / followX 1.05.
• Particle flickering, overall slow rotation + breathing float.

Installation and Enablement¶

It is recommended to install directly from GitHub, or use a locally built tarball:

# Install from GitHub (Recommended)
dsh plugin --profile web add https://github.com/KUNTING0701/dsh-aurora-bg/archive/refs/tags/v1.0.2.tar.gz

# Or install from a locally built tarball
dsh plugin --profile web add /path/to/dsh-aurora-bg-1.0.2.tgz

After installation, you must restart dsh web for the background to take effect. After restarting, you can see the dsh-aurora-bg entry in Settings → Plugins → Plugin List with a status of Enabled · Mounted.

Uninstall¶

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

After uninstalling, you also need to restart dsh web.

Fine-tuning¶

The plugin does not provide independent configuration options. The method for fine-tuning is to directly modify the lib/client.js source code, mainly in three places:

1. Top CSS constants: Spot color and intensity, grid density, and whale position (.dsh-whale’s right/top/width).

2. Background layer anim array: Each layer has a parameter object. The field meanings are as follows:

3. Whale dynamic parameters: Sampling resolution of sampleWhale() (S=60), mouse repulsion (4.9 / .8 / 5), lighting (14 / .28 / 2.79), and loose jitter amplitude.

After saving the changes, restart dsh web to see the effect.

Applicable Scenarios and Notes¶

This plugin is suitable for two types of people: developers who use dsh web daily and want the interface to feel closer to the DeepSeek official website’s aesthetic; and peers who want to reference the implementation of complex dynamic backgrounds using “pure CSS transform + SVG particles”—since it does not use WebGL or persistent canvas animation, the implementation logic itself has reference value.

Please note two points before use:

1. The plugin runs with the permissions of the current dsh process. It is recommended to browse the source code (core logic is concentrated in lib/client.js) before installing to confirm there are no issues. The license is MIT, which is indicated in both the README and package.json.

2. Whether installing, uninstalling, or modifying lib/client.js, you must restart dsh web for the changes to take effect.

Overall, dsh-aurora-bg turns a purely decorative requirement into a plug-and-play plugin with controllable scope of changes, aligning with DSH’s philosophy of “everything is a plugin.” If you want a Web UI background with low resource usage and high visual completeness, you can try it directly.

• Community directory page: https://www.skillhub.cn/plugins/KUNTING0701/dsh-aurora-bg
• GitHub repository: https://github.com/KUNTING0701/dsh-aurora-bg