@aidget-community/grok-acrylic 0.0.0-stage → 0.1.0

package/agents.md

@@ -0,0 +1,31 @@
+# grok-acrylic · Grok · 亚克力挂件
+
+## 用途
+
+展示蓝黑配色的 Grok 猫娘亚克力挂件。角色、科技小图案和 Grok 铭牌合为一张透明
+PNG；原照片中的布面、显示器和支架不属于挂件。
+
+## 结构与素材
+
+- `main.stage` 是唯一可替换区域 `stage`。位置和尺寸归用户控制，内容更新不得移动窗口。
+- `.pendant-art` 负责显示 `assets/pendant.png`；`.pendant-shine` 用同一 PNG 的透明度作遮罩。
+  `.pendant` 按 `--art-ratio` 在窗口内居中，扫光的百分比坐标以这块方形画布为基准，不能
+  改回按矩形窗口铺满。
+- hover 反光由一枚白色径向柔光与一条斜向玻璃高光带组成，不使用角色主题色；两者都被
+  PNG 透明度遮罩限制在图案轮廓内。
+- PNG 是包内运行资源，使用相对路径。`assets/screenshot.png` 仅供社区卡片预览。
+- 保留猫耳、蓝色发束、终端和星形装饰、完整人物姿势以及底部 Grok 铭牌；四周透明留白
+  和透明刀模边缘必须完整，不要裁切或加矩形背景。
+
+## 扫光、权限与刷新
+
+- 内联脚本只在 `.pendant` 上监听鼠标位置和扫光动画，闲置时回到静止光位；动画收敛后
+  停止申请帧。
+- `prefers-reduced-motion` 下直接到达目标。不要增加常驻循环、远程资源或数据请求。
+- `permissions` 仅保留 `script`，`network` 保持空数组；没有定时刷新。
+- 页面使用 `aidget-surface="none"`，不要添加窗口材质或 `backdrop-filter`。
+
+## 平台
+
+- `config.json` 按要求声明 `macos`、`windows` 和 `linux`；实际 Aidget 渲染检查目前只在
+  macOS 完成。其他系统出现差异时在实现层修复，不要删掉扫光效果或加平台分支。

package/config.json

@@ -0,0 +1,11 @@
+{
+  "id": "grok-acrylic",
+  "title": "Grok · 亚克力挂件",
+  "logo": null,
+  "screenshots": ["assets/screenshot.png"],
+  "platforms": ["macos", "windows", "linux"],
+  "size": { "width": 360, "height": 220 },
+  "dragMode": "all",
+  "permissions": ["script"],
+  "network": []
+}

package/index.html

@@ -0,0 +1,96 @@
+<!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>Grok · 亚克力挂件</title>
+  </head>
+  <body>
+    <main class="stage" data-aidget-region="stage">
+      <div class="pendant" role="img" aria-label="Grok 猫娘亚克力挂件">
+        <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 pendant = document.querySelector('.pendant');
+        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;
+
+        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() {
+          const ease = reduceMotion.matches ? 1 : 0.18;
+          pos.x += (target.x - pos.x) * ease;
+          pos.y += (target.y - pos.y) * ease;
+          glow.value += (glow.target - glow.value) * (reduceMotion.matches ? 1 : 0.12);
+          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;
+            return;
+          }
+          requestAnimationFrame(tick);
+        }
+
+        function wake() {
+          if (!running) {
+            running = true;
+            requestAnimationFrame(tick);
+          }
+        }
+
+        function follow(event) {
+          const rect = pendant.getBoundingClientRect();
+          if (!rect.width || !rect.height) return;
+          target.x = clamp((event.clientX - rect.left) / rect.width, -0.2, 1.2);
+          target.y = clamp((event.clientY - rect.top) / rect.height, -0.2, 1.2);
+          glow.target = 1;
+          wake();
+        }
+
+        function rest() {
+          target = { ...REST };
+          glow.target = IDLE_GLOW;
+          wake();
+        }
+
+        pendant.addEventListener('pointermove', follow);
+        pendant.addEventListener('pointerdown', follow);
+        pendant.addEventListener('pointerleave', rest);
+        window.addEventListener('blur', rest);
+        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/grok-acrylic",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Grok 猫娘主题的透明亚克力挂件桌面卡片，带鼠标跟随扫光。",
+  "license": "MIT",
+  "author": {
+    "name": "micooz",
+    "url": "https://github.com/micooz"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aidget-ai/widgets.git",
+    "directory": "packages/grok-acrylic"
+  },
+  "files": [
+    "config.json",
+    "index.html",
+    "style.css",
+    "agents.md",
+    "assets"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/style.css

@@ -0,0 +1,107 @@
+:root {
+  color-scheme: light;
+  --sil: url(assets/pendant.png);
+  --art-ratio: 1;
+  --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;
+  display: grid;
+  place-items: center;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.pendant {
+  position: relative;
+  width: min(100%, 100vh);
+  aspect-ratio: var(--art-ratio);
+  isolation: isolate;
+}
+
+.pendant-art {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background-image: var(--sil);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+  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: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.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.