Preface

For agent development, many people keep the dsh Web UI open all day. The default interface has a static background color, which inevitably becomes monotonous after looking at it for a long time. If you want to add a dynamic background yourself, you have to modify the frontend source code, inject canvas, handle container transparency, theme readability, and frame rate control, which is costly.

The dsh-plugin-backdrop introduced below turns this into a plugin: one command to install, injecting the complete atmosphere of the DeepSeek Harness official site hero—fluid, character whale, glowing fish school, dot-line grid—as a dynamic background into the dsh Web UI. This also aligns with dsh’s philosophy of “everything is a plugin,” as pure frontend enhancements also use the plugin channel.

What is this

dsh-plugin-backdrop is maintained by huguangyu666, is under the MIT license, the current version is 0.1.2, and has been published to npm. In one sentence: dsh Web UI dynamic background plugin.

Implementation-wise, it uses mixed rendering:

  • The fluid background uses WebGL2 (reverse-engineered from the official site’s GLSL).
  • The whale / fish school use pre-rendered Canvas 2D sprites, rendered smoothly at full resolution.
  • The dot-line grid uses Canvas 2D.

Environment requirements: Node >= 22.5, peer dependency @deepseek-ai/dsh >= 0.1.0-rc.6, runtime dependency three 0.150.1. For the full technical details, docs/ARCHITECTURE.md and docs/CANVAS_RENDERING.md in the repository explain it.

What are the four background layers

Fluid Background

WebGL2 flowmap double buffering + fbm/curl-noise domain warping, 5 layers of deep blue-warm gold gradients, overlaid with self-illuminating bloom, a virtual light source following the mouse X movement, grainy noise, and vignette.

Character Whale

A swimming animation extracted from video frames: 35 frame ASCII art, played at ~6fps. The entire whale seamlessly roams horizontally within the interface and floats up and down with breathing, accompanied by bubbles.

One detail worth mentioning: The last frame of the video does not overlap with the first frame, so when the loop restarts, the whale will be “pulled back.” The plugin’s handling is to automatically trigger a cyberpunk glitch burst at the moment of the seam—white flash, RGB chromatic aberration, horizontal bar tearing, magenta trails, frame drop jumps, scanlines, noise—to cover the position jump with the glitch effect.

Glowing Fish School

55 pre-rendered smooth fish-shaped sprites (4 color schemes × 6 frames of tail wagging). The center of the school roams along an arc, fish follow the circle within the group, with banking turns, breathing scaling, depth transparency, and bubbles.

Dot-Line Grid

Canvas 2D drawing: 90px dot matrix + connecting adjacent dots. When the mouse passes, it creates ripples that push the dots away.

UI Integration & Performance

For the background to be visible, the premise is that dsh’s own page container is transparent. The plugin inserts a .backdrop-root container (z-index:0, pointer-events:none) and overlay CSS into the body during apply(); it does not rely on React. It makes known page-level containers transparent, and uses a full viewport scan as a fallback (containers covering ≥90% of the viewport with a solid background are set to transparent). At the same time, it forces the official dsh dark theme by default to ensure text readability, with a tested contrast ratio of 9~19:1.

Performance-wise, all four layers are throttled to 30fps, frames stop when outside the viewport, and auto-stop when static. The DPR (Device Pixel Ratio) limit is 1.5.

Installation & Enablement

# Install
dsh plugin --profile web add dsh-plugin-backdrop

# Uninstall
dsh plugin --profile web remove dsh-plugin-backdrop

After installation, restart dsh and refresh the page. After the steps above, the background will take effect, but there are three points to note:

  1. The official command runs pnpm internally, so pnpm needs to be in PATH. On Windows, if there is no proxy, pnpm will hang. Please configure HTTPS_PROXY with a proxy.
  2. Both installation and uninstallation require restarting dsh, which will disconnect the current session. It is recommended to perform these operations during idle time.
  3. If you have already manually mounted the backdrop using the “Local Source Code Development” method below, do not run the official add command again, otherwise it will report duplicate loader entry id: backdrop.

Local Source Code Development

If you want code changes to take effect immediately, link first, then mount the configuration:

  1. Use a junction to link the package name under the profile directory to the local source code directory:
New-Item -ItemType Junction -Path "$env:USERPROFILE\.dsh\profiles\web\node_modules\dsh-plugin-backdrop" -Target "C:\Users\www13\Documents\AAA项目集\dsh-plugins\dsh-plugin-backdrop"
  1. Edit ~/.dsh/profiles/web/cordis.patch.yml and add:
- insert:
    - id: backdrop
      name: 'dsh-plugin-backdrop'
  1. Restart dsh web and refresh the page.

Quick Preview (Don’t touch production instance)

The prerequisite is that the source code is linked to the profile directory as in the previous section. First, create an overlay file (e.g., C:\Users\www13\.dsh\profiles\web\overlay-backdrop.yml), the content is just the insert snippet above, and then start an instance on a separate port:

dsh --patch "C:\Users\www13\.dsh\profiles\web\overlay-backdrop.yml" --profile web --port 3090

Open http://127.0.0.1:3090/ in the browser to view. Note: If cordis.patch.yml already contains backdrop, do not add --patch again, otherwise it will report duplicate loader entry id: backdrop. At this point, simply run dsh --profile web --port 3090.

Configuration & Debugging

Configuration is stored in localStorage['dsh-backdrop-config'], with default values used on first load; modifications via window.__backdrop.setConfig() are automatically persisted. Each of the four layers has an independent toggle, and overall transparency and parameters for each layer can be adjusted.

If you want to turn off everything except the whale, execute in the browser F12 console:

__backdrop.setConfig({
  layers: { fluid: false, whale: true, fish: false, grid: false },
  opacity: 0.8,
});

Real-time parameter tuning uses the same interface; changes take effect immediately and are saved:

__backdrop.setConfig({
  whale: { swimSpeed: 2.2, glitch: { burstWidth: 0.08, noise: 0.8 } },
  fish: { count: 30, scaleMax: 0.8 },
  fluid: { interactive: true },
});

Common debugging APIs:

window.__backdrop.toggleLayer('whale', false)   // Turn off whale layer
window.__backdrop.setOpacity(0.6)               // Overall opacity
window.__backdrop.config                        // View current effective configuration
window.__backdrop.dispose()                     // Unload background, restore theme and container

The whale instance also exposes pokeBurst(), which can manually trigger a glitch burst; there is a corresponding button on the preview page.

Three common pitfalls:

  1. fluid.interactive (fluid mouse brush flowmap) must be false in chat scenarios, otherwise there will be a “patch of light following your hand.” Turn it on if you want the visual effect of light trails when the mouse moves.
  2. themeMode should remain the default force-dark to ensure text readability.
  3. whale.density/light/mouse/offsetRight and fish.density/light are old WebGL tile parameters; the new Canvas rendering does not use them anymore; they are kept only for compatibility with old configurations. whale.src only worked with the old tile engine and is now invalid. To adjust the whale, adjust whale.swim* and whale.glitch.*.

Suitable Scenarios & Notes

Who is it for: People who keep the dsh Web UI open for long periods, want some atmosphere, and don’t want to maintain their own frontend injection logic themselves. All four layers can be toggled independently; you can reduce the presence by lowering the opacity when chatting, or keep only the whale layer as an ornament.

Notes before installation: The plugin runs with the permissions of the current dsh process. It is recommended to check the source code and license in the repository before installing (this project is MIT); confirm local Node >= 22.5, dsh >= 0.1.0-rc.6, and pay attention to the pnpm proxy and session disconnection matters in the previous section.

Summary

dsh-plugin-backdrop compresses “adding a dynamic background to the Web UI” into an installation command and a few console calls: independent toggles for the four atmospheric layers, real-time adjustable and persistent parameters, and performance with throttling and fallback. If you use the dsh Web UI regularly, it is worth installing and trying.

  • GitHub Repository: https://github.com/huguangyu666/dsh-plugin-backdrop
  • Community Directory Entry: https://www.skillhub.cn/plugins/huguangyu666/dsh-plugin-backdrop (The community directory is an independent site with no official affiliation to DeepSeek / HF. This address comes from directory clues and is subject to the site’s actual listing.)