dsh-bird-bike: Pixel Chick Cycling Band at the Bottom of the DSH Web GUI

In the DeepSeek Harness (DSH) Web GUI, the bottom bar is usually a fixed placeholder area. The dsh-bird-bike plugin transforms this area into a dynamic pixel-art scene, providing developers with immediate visual feedback and interactive fun.

Plugin Introduction¶

dsh-bird-bike is a playful dress-up plugin maintained by the user blackstar-baba. It addresses the Web GUI’s static interface and lack of dynamic details. The plugin mounts a 2D pixel-art animation on top of DSH’s ui-layout, includes physics simulation and interaction logic, and runs without a build step.

Core Features¶

1. Pixel Chick Rider and Bicycle¶

Character and Animation: The chick wears a blue-green helmet and features an IK inverse-kinematics pedaling animation, a two-frame wing-flapping animation, and a blinking effect.
Bicycle Details: Includes spoked wheels, a chain, and pedal cranks.

2. Day-Night Cycle and Environment¶

Cycle Mechanism: A full day-night cycle lasts about 80 seconds. Dusk and dawn phases transition smoothly across 8 color levels.
Night Effects: At night, stars, a square moon, and a headlight beam appear.

3. Interaction and Events¶

Ring the Bell and Accelerate: Clicking the riding lane triggers a chiptune “ding-ding” and Minecraft-style colorful note particles, while the chick performs a short acceleration dash (with dust).
Jump: The chick performs a blocky little hop and kicks up dust when landing.
Monster Encounters:
- Daytime: A Creeper walks toward the chick. When it gets within 2m, a flashing acceleration warning triggers, followed by an explosion that launches the chick into the sky.
- Nighttime: A Zombie slowly approaches and knocks the chick flying on contact (with a spinning flyout and a dull thud).

4. UI and State Management¶

Riding Statistics: Displays mileage, speed, and riding duration in real time (only actual riding time is accumulated). Numeric values use fixed-width monospaced digit slots to keep the display stable without jitter.
Collapsible: The riding lane can be collapsed into a 40px mini lane, and the state is persisted locally.
Accessibility Support: Respects the system prefers-reduced-motion setting and keeps interactions available in reduced-motion mode.

Installation and Enablement¶

Install the plugin using the official CLI:

dsh plugin --profile web add dsh-bird-bike

After installation, the plugin automatically mounts to the bottom of the Web GUI. You can see the pixel chick riding without any extra configuration.

Controls¶

Click the riding lane: Triggers bell acceleration and note particle effects.
Jump: The chick performs a jumping action.
Toggle day and night: Click to switch to dusk or dawn.
Collapse/Expand: Use a button or state toggle to collapse the riding lane into a 40px mini lane, or expand it into the full scene.

Technical Implementation and Compatibility¶

Tech Stack: Written in pure JavaScript with zero dependencies and zero build steps. It registers a lazy factory through window.__ModuleLoader__ and inserts itself into the shell.bottom slot of ui-layout.
Rendering Approach: Drawn on a low-resolution off-screen canvas using hard pixel primitives (rectangles, Bresenham lines, scanline ellipses, etc.), then rendered with nearest-neighbor upscaling.
Compatibility Requirements: Requires DSH version >= 0.2.1-alpha. The plugin depends on the shell.bottom slot, which has been available since that version.

Uninstallation¶

Remove the plugin from the Plugins page in the GUI.
Or manually run pnpm remove dsh-bird-bike in the profile directory, and remove the relevant entry from the dsh.profile.bundles configuration.

Summary¶

dsh-bird-bike demonstrates how simple code can add dynamic visual elements to the DSH Web GUI without increasing complexity. Its Canvas-based pixel rendering and physics simulation details provide a useful reference for plugin development. For more information and the source code, visit GitHub.