PixelWhale 🐋
PixelWhale
深度求索时，派一只像素蓝鲸为你喷水摆尾。
A DSH (DeepSeek Harness) web UI plugin: while the model is thinking, the native
「深度求索中…」/ "Deep diving…" status row becomes a pixel-art DeepSeek blue whale
spouting and wagging its tail, next to the same status text rendered in a pixel
font with a glyph-level shimmer.
Features
- 🐋 Animated pixel whale — the hand-drawn DeepSeek blue-whale art (40×25 grid,
6-tone palette), expanded into an 84-frame spout + tail-wag loop, downsampled to
27×18 and painted as a CSS sprite sheet (
steps() animation).
- 🔤 Real pixel font — Fusion Pixel 12px,
subsetted to exactly the characters the status row uses (ASCII + the Chinese
glyphs + a narrowed middle dot), embedded as WOFF2 so it works offline.
- ✨ Glyph-level shimmer — the moving highlight is clipped to the text glyphs
(
background-clip: text), so it travels across the strokes instead of the row.
- 📐 Sits on the text baseline —
align-items: baseline on the status row puts
the bottom of the whale on the same line as the bottom of the glyphs, hugging the
text on its left.
- 🎯 Non-invasive — the native text node, language, timer and update logic are
untouched; only CSS is applied to the thinking row.
- 🪶 Zero runtime overhead — no
MutationObserver, no polling, no timers, no
DOM writes after setup. The client half injects a single <style> element and
nothing else runs, so there is no per-frame work and no memory growth while
streaming.
Install
From the DSH plugin market, or:
dsh plugin --profile desktop add https://github.com/Lkrain821/dsh-pixelwhale
Then restart DSH.
How it works
- The host half (
lib/index.js) is a client-only cosmetics entry — it just mounts
the bundle and exposes the browser half via exports["./client"].
- The client half (
lib/client.js) injects one <style> element containing:
@font-face rules for the subsetted pixel font, scoped with unicode-range;- a sprite-sheet
background-image + @keyframes on the native whale icon
([data-chat-running="true"] [class*="runningIcon"]), which replaces the
shipped whale drawing without inserting any node;
background-clip: text shimmer and the pixel font on the status text;align-items: baseline on runningContent so the whale bottom lines up with
the text baseline;- a
prefers-reduced-motion: reduce fallback that pins the first frame and drops
the shimmer.
Everything is keyed on the [data-chat-running="true"] attribute DSH puts on the
thinking row, so the whole effect appears and disappears with that row.
Verified against DSH 2.0.20-next. Selectors are attribute/substring based
(data-chat-running, runningIcon, runningContent, runningText) rather than
hashed CSS-module names, so they tolerate ordinary client rebuilds.
Font license
The embedded pixel font is Fusion Pixel Font,
licensed under SIL Open Font License 1.1 (OFL-1.1). See FONT-LICENSE-OFL.txt.
Font copyright belongs to TakWolf (https://takwolf.com) and upstream font authors.
The whale frames are derived from the DeepSeek blue-whale art used by
dsh-TUI / dsh-ui-whale, courtesy of @lhh010.
License
MIT (see package.json). The bundled font carries its own OFL-1.1 license.
