dsh-liquid-chatbox
About
A liquid-glass composer card for the DSH desktop UI (Electron/Chromium).
Only the input card is styled: it keeps a translucent tint and refracts the
content behind it with an SVG displacement lens plus per-channel chromatic
dispersion.
There is no palette, font, window rim or global surface restyling in this
package. It is a client-only bundle — no build step, no native dependencies.
Features
- Refractive composer card — the input card bends the content behind it
with an SVG
feDisplacementMap, using a BK7 glass model and a convex rim
profile.
- Chromatic dispersion — three displaced copies (R, G, B at their own
refractive indices) isolated with
feColorMatrix and screen-blended.
- Card-shaped map — the displacement map is generated from the card's
actual aspect ratio and corner radius, and regenerated when the card grows
or shrinks, so the lens band stays on the border instead of drifting.
- Symmetric edges — top and bottom sample toward the card centre, so both
borders show the same lens behaviour.
- Settings — Settings → General → 玻璃质感: blur, card tint, refraction
strength and dispersion, with a reset button. Values persist in
localStorage under dsh-glass-settings.
- No build step — plain ESM loaded by the DSH client module loader.
Requirements
- DSH desktop app. The lens filter is mounted on
dsh-app://; in a plain
browser the card keeps its tint and blur, but the SVG lens is not mounted.
- Chromium-based renderer (
backdrop-filter: url(#svgFilter) is
Chromium-only).
- Windows 11 is recommended for the window material; the card still works on
any page, but the acrylic backdrop is what makes the refraction visible
when there is no content behind the card.
Install
Option A — manual (profile)
-
Copy this folder into your DSH profile:
%USERPROFILE%\.dsh\profiles\desktop\node_modules\dsh-liquid-chatbox
-
Add the plugin to %USERPROFILE%\.dsh\profiles\desktop\cordis.patch.yml:
- insert:
- id: liquid-chatbox
name: dsh-liquid-chatbox
-
Restart the DSH desktop app.
pnpm may prune packages that are not in the profile's dependency tree. If
you manage the profile with pnpm, register the plugin as a file: dependency
(or install it as a bundle) so it is not moved to node_modules/.ignored.
Option B — bundle/plugin manager
The package ships its own cordis.patch.yml (dsh.bundle.patch), so a manager
that understands the DSH bundle format can install it. Install the package,
then restart the app.
Usage
Open Settings → General and scroll to 玻璃质感. The sliders apply
immediately; “恢复默认” resets blur 0.5px, tint 18%, refraction 0.04 and
dispersion 2.5.
How it works
-
client.js injects one <style> element and mounts the lens SVG filter
(#dsh-lg-refract) used by the composer card.
-
The displacement map is generated at runtime from a rounded-rect SDF whose
aspect ratio and radius match the card; the band is 36px wide (scaled with
the card width) and the profile is monotonic, so the mapping never folds.
-
The card uses:
backdrop-filter: blur(0.5px) url(#dsh-lg-refract)
contrast(1.05) brightness(1.1) saturate(1.8);
-
Dispersion uses three displaced copies (R, G, B) isolated with
feColorMatrix and screen-blended.
Changes in 0.2.0
- Scope reduced to the composer card: the pink accent, Maple Mono overrides,
glass window rim and global surface restyling were removed.
- The displacement map now matches the card's aspect ratio and corner radius
and is regenerated on resize, fixing the band drifting away from the border.
- Top and bottom edges sample symmetrically toward the card centre, so the
bottom border shows the same reflection as the top.
- Reverted to a monotonic rim profile: the previous bump profile could fold the
mapping and make text appear to move backwards inside the band.
Known limitations
backdrop-filter samples the page's painted backdrop, not the DWM
material/desktop. The acrylic stays live, but the lens cannot refract the
material itself.- A displaced sample that lands on a translucent pixel can let the original
content show through the semi-transparent filter result (a faint edge ghost).
Making the output opaque removes it but replaces the vacated pixels with the
page colour, because the material colour is not part of the filter input.
- The lens needs something behind the card. Over a flat area there is nothing
to bend, so the effect is invisible there.
- Large blur/refraction on a sticky, scrolling surface is GPU/CPU heavy; the
defaults are kept small.
Development
node --check client.js
index.js — empty host half.client.js — the whole client plugin (styles + filter + settings row).locale/*.json — catalogue metadata.icon.svg — plugin icon.
No dependencies, no build.
Credits
The refraction model and edge-bulge idea are derived from two MIT-licensed
projects:
See THIRD_PARTY_NOTICES.md for the full notices.
License
MIT © 2026 typemiao
