npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@agentbuff/dsh-whale-galaxy

v0.1.2

Published

DSH web background plugin 「鲸落星河」: a DeepSeek whale swimming through a particle galaxy — canvas starfield, drifting nebula, stardust whale wake, dark/light adaptive.

Readme

🐋 @agentbuff/dsh-whale-galaxy 「鲸落星河」

一个为 DeepSeek Harness 打造的 Web 视觉插件:全屏 Canvas 粒子星河、一条会游动和响应鼠标的粒子鲸鱼,以及在 AI 对话期间从星河跃迁而来的小鲸鱼伙伴。

一鲸落,万物生。 鲸鱼游过之处,尾迹化作新的星辰 —— 这条星河,由鲸落而生。

效果

  • 🌌 深空星河背景:深蓝 → 靛 → 紫 的渐变天幕,缓慢漂移的星云光晕(DeepSeek 品牌蓝 + 青色 + 紫色),暗角聚焦;星河透过所有界面表面(侧边栏、面板、消息气泡、输入框)隐隐浮现。
  • ✨ 颗粒星海:数千颗 1px 星尘铺满天幕(newmixcoffee 同款栅格采样),底层流体网格带着它们缓慢卷动。
  • 🖱️ 鼠标搅拌(参考 newmixcoffee.com):光标划过时沿路径注入速度场,星尘像粉末被搅开;停下后弹簧回到原位,停驻时仍有一圈柔和空腔。
  • ☄️ 流星:偶尔划过,顺带扰动附近星尘。
  • 🐋 粒子鲸鱼:DeepSeek logo 被栅格化成上万颗明暗不均的颗粒,以星尘构成形体横穿星河;游到边缘淡出,从另一侧淡入。
  • 💫 星尘尾迹:鲸尾持续洒落颗粒,汇入身后的星河。
  • 💬 对话鲸鱼伙伴:当 Harness 进入 Deep diving...,星河中的同一条鲸鱼沿弧线游向流式输出行,收束为与 DeepSeek Logo 同方向的小鲸鱼;并不会同时出现两条鲸鱼。
  • 🧠 自动状态反馈:等待模型时环绕星点思考;流式输出时尾鳍持续摆动、扫描环流转;完成时绽放星点;空闲后恢复安静游弋。无需额外设置。
  • 🌗 明暗自适应:跟随 DSH 主题(body[data-ds-dark-theme]);深色主题下星河绚烂,浅色主题下保持素雅,文字始终可读。
  • 🖱️ 与 可访问性:右下角浮动小鲸鱼按钮可随时开关(localStorage 记忆);尊重 prefers-reduced-motion;隐藏标签页自动暂停渲染;DPR 上限 2、粒子数按面积自适应。

安装

# 在 dsh 的 web profile 中安装本插件
dsh plugin --profile web add @agentbuff/dsh-whale-galaxy

或从本地路径安装(开发时):

dsh plugin --profile web add file:/path/to/dsh-whale-galaxy

安装后重启 web 应用使新插件行进入启动图(plugin-set 变更需要重启):

dsh web
# 或 dsh --profile web

打开界面后即可看到鲸落星河的背景;右下角小鲸鱼按钮可关闭/开启。

对话交互

  1. 空闲时,鲸鱼在星河里缓慢游动,鼠标只会在触及鲸鱼粒子时将它们沿移动方向夸张地带开,并缓慢归位。
  2. 当 AI 进入对话处理阶段,这同一条鲸鱼会仰头画弧游向当前流式输出行的右端,并在途中缩小。
  3. 落位后,小鲸鱼保持 DeepSeek Logo 的原始朝向;在思考或流式输出期间持续轻摆尾鳍,结束后回到安静状态。

开发

npm install          # 安装 esbuild / typescript(仅开发依赖)
npm run build        # 产出 lib/index.js(Node 半部)与 lib/client.js(浏览器 bundle)
npm run watch        # 监听重建 —— 安装后重建 client.js 会经 HMR 自动热更新
npm run preview      # 截图独立预览页(scripts/shot.mjs)
node scripts/analyze.mjs   # 像素级自检(星海/鲸鱼/动画)

本地迭代:dsh plugin --profile web add "link:..." 装好一次并重启后,npm run watch 每次重建都会触发 client-modules 的 HMR 轮询(500ms),页面自动重载 bundle,无需再重启服务。

提示:link: 安装(符号链接)适合开发;发布到 registry 后用户用 dsh plugin --profile web add @agentbuff/dsh-whale-galaxy 安装正式版本即可。

工作原理

与 DSH 的插件契约完全一致(参考 dsh-better-sidebar):

| 声明 | 位置 | 作用 | | --- | --- | --- | | dsh.bundle.patch | cordis.patch.yml | 向 profile 的 cordis 配置插入一行插件(行 name = 包名),使 client-modules 扫描能解析到本包 | | dsh.client.platform: "web" | package.json | 声明这是一个 web client 包,进入 window.__DSH_BOOT__ 启动图 | | exports["./client"] | package.json | 指向构建产物 lib/client.js,由 DSH 的插件静态资源端点提供 | | apply(ctx) / inject | lib/client.js | client 插件入口:挂载 canvas、注入样式、注册开关 |

背景层级:canvas 固定在 z-index: -1,并覆盖 --dsw-alias-bg-base 为半透明,让星河从应用面板背后透出 —— 不改任何组件代码,只动主题 token,因此与 DSH 的升级天然兼容。

许可

MIT