@aidget-community/deepseek-whale-pendant 0.0.0-stage → 0.2.1

package/agents.md

@@ -0,0 +1,75 @@
+# deepseek-whale-pendant · DeepSeek 鲸鱼娘 · 亚克力挂件
+
+## 用途
+
+透明桌面上的亚克力挂件复刻：吃饭场景的鲸鱼娘立绘加底部 DeepSeek 铭牌，边缘是半透明
+玻璃刀模，高光跟随鼠标。原照片里的米色布纹背景和下方显示器桌面已扣除，只保留图案本体。
+
+## 素材
+
+- 图案由生图模型按实物照片复刻为 `1254 × 1254` 透明底图，再离线加工成 `700 × 692` 的
+  RGBA PNG，作为运行期资源放在 `assets/pendant.png`，由 `style.css` 的 `--sil` 变量声明
+  一次，可见层与遮罩层共用。`assets/screenshot.png` 只给社区卡片用，运行期不加载。
+- 资源引用必须是包内相对路径：Aidget 只放行 `index.html`、`style.css` 和 `assets/**`，
+  PNG 以 `image/png` 返回，CSP 的 `img-src` 与 `style-src` 已包含本地源。不要改成绝对
+  路径或远程 URL，也不要为此往 `network` 里加源。
+- 图案自带的白色贴纸描边（实测厚 14–20px）已按“到轮廓的深度”改成渐隐透明：环带内
+  alpha 由约 0.14 的底色线性升到原值，深度 22px 处接回画面自己的深蓝描边。不要把这层
+  重新涂成不透明白色，也不要反过来把整张图加一圈实心白边——凸起之间的缝隙会被糊住，
+  看起来就像凸起被削平。
+- 玻璃刀模是四圈向外偏移的轮廓，全部半透明：内侧高光线（半径 3、白 50%）、玻璃本体
+  （半径 9、冷白 12%）、外缘亮边（半径 12、近白 38%）、外围冷色轮廓（半径 15、深蓝
+  18%），并按左上打光做亮度渐变。半径刻意保持窄：刀模外扩会填平相邻凸起之间的窄缝。
+  外围轮廓不能删，浅色桌面上的剪影靠它撑住。
+- 素材四周自带 7.5%（约 53px）透明留白，挂件本体只占画布 85%。这圈留白用于消除
+  “上方和左侧凸起被截断”的观感，同时保证玻璃边和投影不被窗口边缘切掉；不要为了填满
+  画面收紧它。需要更大挂件就整体放大窗口，留白按比例跟着长。
+- 必须完整保留：人物与饭碗、筷子、水滴与气泡、右侧红心气泡、底部 `DeepSeek` 铭牌
+  （鲸鱼尾图标、蓝色文字、两端四角星）。
+
+## 结构
+
+- `main.stage` 带 `data-aidget-region="stage"`，可整体替换挂件结构；内部不要新增文字、
+  底板或按钮。`<script>` 在 `main` 之外，patch stage 区域不会影响脚本。
+- `.pendant-art`（可见层）与 `.pendant-shine`（遮罩层）共用同一个 `--sil`，轮廓只有一份
+  数据；两层分别按 `background-size: contain` 与 `mask-size: contain` 居中，改画布边距时
+  必须同步，否则遮罩与图案错位。
+- 初始尺寸 `249 × 247`，与图案等比：本体约 212 CSS px，四边各约 18 CSS px 透明空隙。
+  安装后窗口位置和尺寸归用户所有，内容更新不得移动窗口。
+- 换图案只替换 `assets/pendant.png`；改动画布尺寸或留白时同步 `style.css`，否则遮罩与
+  图案错位。`aidget_patch` 只适合改 HTML 结构，不能用来换二进制资源。
+- 用 `aidget widget create` 建的本地开发副本没有写入 `assets/` 的通道，可能把同一张 PNG
+  内联成 data URI；那是调试形态，不是发布形态，两边各自核对字节。
+
+## 扫光（跟随鼠标）
+
+- `.pendant-shine` 内含 `.shine-spot`（径向柔光）与 `.shine-streak`（斜向高光带），位置由
+  `--mx` / `--my` 决定，整层被 `--sil` 遮罩限制在轮廓内，用 `mix-blend-mode: screen` 提亮，
+  `isolation: isolate` 防止溢出到透明区。
+- `index.html` 末尾的内联脚本通过 `window.aidget.onPointer` 接收宿主 hover 事件；
+  `enter` / `move` 把 viewport 局部坐标写入 `--mx` / `--my` 并升到全亮，`leave` 回到
+  静止位 `(30%, 20%)`、亮度 `0.42`。不要改回 DOM `pointermove`，也不要在窗口 `blur`
+  时收掉高光，否则非活动窗口会失去跟随效果。
+- `--shine` 初值必须保持 `0`：脚本未执行时挂件呈无高光降级态，截图里能否看到柔光也用来
+  判断脚本是否运行。
+- 扫光动画使用 `window.aidget.requestAnimationFrame`，按经过时间插值；收敛后停止申请帧。
+  需要宿主提供该动画 API，不要改用 iframe 的原生帧时钟或增加常驻循环。
+- `prefers-reduced-motion: reduce` 时脚本直接跳到目标值，不做插值跟随。
+
+## 权限与外观
+
+- `permissions` 仅 `["script"]`，只为扫光跟随鼠标；`network` 必须保持空数组，不加远程
+  资源或数据请求。无外部数据、无定时刷新，除扫光外没有 CSS 动画。
+- `dragMode` 为 `all`：拖动需要按下鼠标，不干扰悬停扫光。若宿主拖动吞掉指针事件导致
+  扫光不动，改成 `handle`，不要删脚本。
+- 使用 `aidget-surface="none"` 与透明页面背景；不要矩形底板、窗口材质，也不要用
+  `backdrop-filter`（挂件页面背后没有可采样的内容，拖动时只会闪空白）。
+- 保留图案本身的扁平赛璐璐上色，不要叠加新的调色滤镜。
+
+## 平台
+
+- 实现只用标准 HTML/CSS/JS，遮罩与高光定位均写 `-webkit-` 前缀版本，无构建步骤、无依赖。
+- `config.json` 按仓库负责人要求声明全平台，与 `whalechan-acrylic` 和三个热搜组件同一
+  口径。真实渲染验证目前只有 macOS（Aidget 截图加原生窗口抓取）；Windows 与 Linux 未做
+  运行时确认，若遮罩或 `mix-blend-mode` 在别的内核上有差异，在实现层修，不要靠平台分支
+  删效果。

package/config.json

@@ -0,0 +1,12 @@
+{
+  "id": "deepseek-whale-pendant",
+  "title": "DeepSeek 鲸鱼娘 · 亚克力挂件",
+  "minHostVersion": "0.1.13",
+  "logo": null,
+  "screenshots": ["assets/screenshot.png"],
+  "platforms": ["macos", "windows", "linux"],
+  "size": { "width": 249, "height": 247 },
+  "dragMode": "all",
+  "permissions": ["script"],
+  "network": []
+}

package/index.html

@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="aidget-surface" content="none" />
+    <link rel="stylesheet" href="style.css" />
+    <title>DeepSeek 鲸鱼娘 · 亚克力挂件</title>
+  </head>
+  <body>
+    <main class="stage" data-aidget-region="stage">
+      <div class="pendant" role="img" aria-label="DeepSeek 鲸鱼娘吃米饭亚克力挂件">
+        <div class="pendant-art" aria-hidden="true"></div>
+        <div class="pendant-shine" aria-hidden="true">
+          <span class="shine-spot"></span>
+          <span class="shine-streak"></span>
+        </div>
+      </div>
+    </main>
+    <script>
+      (() => {
+        const stage = document.querySelector('.stage');
+        const root = document.documentElement;
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+        const REST = { x: 0.3, y: 0.2 };
+        const IDLE_GLOW = 0.42;
+        const clamp = (value, lo, hi) => Math.min(hi, Math.max(lo, value));
+
+        let target = { ...REST };
+        let pos = { ...REST };
+        let glow = { value: 0, target: IDLE_GLOW };
+        let running = false;
+        let previousTime = null;
+
+        function paint() {
+          root.style.setProperty('--mx', `${(pos.x * 100).toFixed(2)}%`);
+          root.style.setProperty('--my', `${(pos.y * 100).toFixed(2)}%`);
+          root.style.setProperty('--shine', glow.value.toFixed(3));
+        }
+
+        function tick(timestamp) {
+          const elapsed =
+            previousTime === null
+              ? 1000 / 60
+              : Math.min(100, Math.max(0, timestamp - previousTime));
+          previousTime = timestamp;
+          const ease = reduceMotion.matches ? 1 : 1 - Math.pow(0.82, elapsed / (1000 / 60));
+          pos.x += (target.x - pos.x) * ease;
+          pos.y += (target.y - pos.y) * ease;
+          glow.value +=
+            (glow.target - glow.value) *
+            (reduceMotion.matches ? 1 : 1 - Math.pow(0.88, elapsed / (1000 / 60)));
+          paint();
+          const settled =
+            Math.abs(target.x - pos.x) < 0.002 &&
+            Math.abs(target.y - pos.y) < 0.002 &&
+            Math.abs(glow.target - glow.value) < 0.004;
+          if (settled) {
+            pos = { ...target };
+            glow.value = glow.target;
+            paint();
+            running = false;
+            previousTime = null;
+            return;
+          }
+          window.aidget.requestAnimationFrame(tick);
+        }
+
+        function wake() {
+          if (!running) {
+            running = true;
+            window.aidget.requestAnimationFrame(tick);
+          }
+        }
+
+        function follow(x, y) {
+          const rect = stage.getBoundingClientRect();
+          if (!rect.width || !rect.height) return;
+          target.x = clamp((x - rect.left) / rect.width, 0, 1);
+          target.y = clamp((y - rect.top) / rect.height, 0, 1);
+          glow.target = 1;
+          wake();
+        }
+
+        function rest() {
+          target = { ...REST };
+          glow.target = IDLE_GLOW;
+          wake();
+        }
+
+        window.aidget.onPointer((event) => {
+          if (event.type === 'leave') {
+            rest();
+            return;
+          }
+          follow(event.x, event.y);
+        });
+        document.addEventListener('visibilitychange', () => {
+          if (document.hidden) rest();
+        });
+
+        paint();
+        wake();
+
+        if (window.aidget && typeof window.aidget.ready === 'function') {
+          window.aidget.ready();
+        }
+      })();
+    </script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,25 @@
 {
   "name": "@aidget-community/deepseek-whale-pendant",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.1",
+  "description": "透明桌面上的 DeepSeek 鲸鱼娘亚克力挂件，半透明玻璃刀模与跟随鼠标的扫光。",
+  "license": "MIT",
+  "author": {
+    "name": "micooz",
+    "url": "https://github.com/micooz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aidget-ai/widgets.git",
+    "directory": "packages/deepseek-whale-pendant"
+  },
+  "files": [
+    "config.json",
+    "index.html",
+    "style.css",
+    "agents.md",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/style.css

@@ -0,0 +1,103 @@
+:root {
+  color-scheme: light;
+  --sil: url(assets/pendant.png);
+  --mx: 30%;
+  --my: 20%;
+  --shine: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+  background: transparent;
+}
+
+.stage {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-height: 120px;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.pendant {
+  position: absolute;
+  inset: 0;
+  isolation: isolate;
+}
+
+.pendant-art {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-image: var(--sil);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  filter: drop-shadow(0 2px 3px rgb(14 40 64 / 30%));
+}
+
+.pendant-shine {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  opacity: var(--shine);
+  mix-blend-mode: screen;
+  pointer-events: none;
+  -webkit-mask-image: var(--sil);
+  mask-image: var(--sil);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-size: contain;
+  mask-size: contain;
+}
+
+.shine-spot,
+.shine-streak {
+  position: absolute;
+  left: var(--mx);
+  top: var(--my);
+}
+
+.shine-spot {
+  width: 78%;
+  height: 78%;
+  transform: translate(-50%, -50%);
+  background-image: radial-gradient(
+    circle,
+    rgb(255 255 255 / 24%) 0%,
+    rgb(255 255 255 / 6%) 38%,
+    rgb(255 255 255 / 0%) 64%
+  );
+}
+
+.shine-streak {
+  width: 190%;
+  height: 17%;
+  transform: translate(-50%, -50%) rotate(-26deg);
+  background-image: linear-gradient(
+    90deg,
+    rgb(255 255 255 / 0%) 0%,
+    rgb(255 255 255 / 30%) 36%,
+    rgb(255 255 255 / 58%) 50%,
+    rgb(255 255 255 / 30%) 64%,
+    rgb(255 255 255 / 0%) 100%
+  );
+  filter: blur(3px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shine-streak {
+    filter: blur(4px);
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.