Jakubantalik/thinking-orbs

# thinking-orbs 适用于 AI 与 Agent UI 的点状思考球加载指示器。提供六种精心调校的动画状态，每种均包含两种针对特定用途优化的尺寸，并在纯 2D canvas 上渲染 —— 无需 WebGL，无需滤镜，在 Chrome、Safari 和 Firefox 中表现完全一致。 [在线演示](https://orbs.jakubantalik.com) · [代码仓库](https://github.com/Jakubantalik/thinking-orbs) · [报告问题](https://github.com/Jakubantalik/thinking-orbs/issues) ## 安装 ``` npm install thinking-orbs ``` ## 快速开始 ``` import { ThinkingOrb } from 'thinking-orbs'; function Status() { return ; } ``` ## 状态 代表 Agent 正在执行的六种动作，每种均具有独特的动画： ``` {/* particles on tilted orbits */} {/* a scan meridian sweeps a dotted globe */} {/* bands scramble, then click back solved */} {/* a waveform rolls through the rings */} {/* an undulating multi-band sash */} {/* dotted outline: circle → triangle → square */} ``` ## 尺寸 两种调校好的预设 —— 它们是独立的设计，而非简单的缩放。`64` 适用于聊天头像尺寸，`20` 适用于行内文本尺寸。每种尺寸都有各自的点数、点大小和速度调校： ``` ``` ## 主题 严格的单色调 —— 深色背景使用浅色墨水，浅色背景使用深色墨水 —— 并根据宿主项目自动选择模式： ``` {/* default — detects from the project */} {/* pin: light dots for dark backgrounds */} {/* pin: dark dots for light backgrounds */} ``` `auto` 通过三层机制解析，并在其中任意一层发生变化时实时更新： 1. 祖先元素的 `data-theme="dark|light"` 属性或 `dark`/`light` 类（Tailwind / shadcn 的约定），通过 `MutationObserver` 监听； 2. 否则使用 `prefers-color-scheme`，订阅实时的操作系统主题切换； 3. SSR 安全 —— canvas 仅在客户端、且在主题解析完成后才进行绘制。 ## 其他 props ``` ``` 所有其他的 `` props（`className`、`style`、`data-*` 等）均会直接透传。 ## 无障碍与性能 - 开箱即用的 `role="img"`，并带有合理的逐状态 `aria-label`。 - `prefers-reduced-motion: reduce` 会渲染一个静态的代表性帧 —— 无动画 —— 且依然会跟随实时主题。 - 每个实例在滚出屏幕时（`IntersectionObserver`）或标签页隐藏时会自动暂停，并恢复至原相位 —— 所有实例共享同一个时钟。 - 仅使用纯 2D canvas arcs：没有 `ctx.filter`，没有 SVG 滤镜，没有 WebGL —— 在任何地方渲染出相同的像素，在低端设备上开销极低。Device-pixel-ratio 上限为 2。 ## 许可证 MIT © Jakub Antalik

标签：自动化攻击