Foreword¶

DeepSeek Harness (DSH) adopts a plugin-based architecture. The skin system is mainly responsible for static base colors, frosted effects, and borders. Complex liquid-glass refraction effects (such as chromatic aberration edges and dynamic highlights) require dynamically injected SVG filters, while skin systems usually do not have JS execution permissions. This plugin aims to inject an SVG refraction filter layer into Web-side DSH. Working with the orca-scene skin, it achieves a complete liquid-glass visual effect.

Plugin Overview¶

dsh-orca-glass is a fun skin customization plugin maintained by huzhengbang2007. It dynamically injects SVG filter definitions and overlay styles into the document via JavaScript, uses backdrop-filter: url(#svgFilter) to create background refraction and chromatic dispersion, and follows the pointer to create highlights.

Core Features¶

The plugin primarily does the following:
1. SVG refraction filter injection: Injects a zero-size SVG into document.body, containing feTurbulence (ripple noise) and feDisplacementMap (displacement mapping), to generate frosted effects, chromatic dispersion edges, and refraction effects.
2. CSS style overrides: Injects <style> rules scoped to html[data-dsh-skin='orca-scene'], overriding the styles of elements such as the sidebar, details pane, bubbles, and input card.
3. Visual enhancements: Adds a grain layer (grain), pointer radial highlight (spot), and floating glass card effect (float).
4. Runtime parameter tuning interface: Provides a global object window.__orcaGlass, allowing runtime adjustment of parameters such as refraction strength, chromatic dispersion, and graininess.

Installation and Configuration¶

Installation consists of two steps: installing the skin and installing the plugin. Both are required.

1. Install the Skin¶

First, install the companion orca-scene skin. Copy the entire skin/orca-scene/ directory to $DSH_HOME/skins/orca-scene/ (usually ~/.dsh/skins/orca-scene/ locally). Then activate the skin in the skin center, or specify it in the configuration file:

// $DSH_HOME/skin-center-active.json
{ "active": "orca-scene", "initialized": true, "background": { "enabled": true, "inputCardBlur": 18, "bubbleOpacity": 55, "bubbleBlur": 14 } }

2. Install the Plugin¶

Place the plugin package into the profile’s node_modules directory:

$DSH_HOME/profiles/<profile>/node_modules/dsh-orca-glass/

Register two configurations in the profile’s package.json: dependencies for package resolution and dsh.profile.bundles for loading the plugin layer.

{
  "dependencies": { "dsh-orca-glass": "file:../../plugins/dsh-orca-glass" },
  "dsh": { "profile": { "bundles": [ /* ...其它 bundles... */ "dsh-orca-glass" ] } }
}

Note: Client-side plugins are only loaded when DSH starts; you must restart DSH after modifying the configuration.

Parameter Adjustment¶

After the plugin is loaded, use window.__orcaGlass in the browser console to tune parameters.

Common Methods¶

window.__orcaGlass.get()                         // 获取当前参数
window.__orcaGlass.tune({ refract: 32, chroma: 12 }) // 调整折射强度与色散
window.__orcaGlass.tune({ float: false, grain: 0 }) // 关闭浮空卡或颗粒
window.__orcaGlass.reset()                       // 重置为默认参数
window.__orcaGlass.css()                         // 获取当前生成的 CSS 文本

Parameters¶

Notes¶

1. Path restrictions: The plugin must run under a pure ASCII path. If the path contains non-ASCII characters, it may cause path mojibake (errno -4094). It is recommended to avoid Chinese paths or use junctions (which may not be traversable in some environments).
2. Configuration completeness: The plugin is loaded only when both “the source code is in node_modules” and “package.json declares dsh.profile.bundles” are satisfied.
3. Skin dependency: The CSS rules injected by the plugin are gated by the skin (html[data-dsh-skin='orca-scene']); the refraction layer is automatically disabled when switching to another skin.
4. Configuration storage: Tuned parameters are saved in localStorage["dsh-orca-glass"].

Uninstallation¶

• Disable the plugin: remove dsh-orca-glass from dsh.profile.bundles in package.json and restart DSH.
• Revert the effect: temporarily call window.__orcaGlass.tune({ refract: 0, grain: 0, float: false }).
• Change the skin: the refraction layer is automatically disabled when the skin is switched.

Summary¶

dsh-orca-glass supplements the missing JS capabilities, addressing the limitation of DSH skins in dynamic filter rendering. Together with the orca-scene skin, it enables a highly realistic liquid-glass interaction experience on the Web side.