thinking-orbs-vue3

原 thinking-orbs React 组件的 Vue 3 + TypeScript 转写版本。核心 Canvas 动画算法保持一致，并提供 Vue 单文件组件与完整演示站。

原项目地址：https://github.com/Jakubantalik/thinking-orbs

功能

• 六种动画状态：working、searching、solving、listening、composing、shaping
• size 支持任意数值，并自动同步设置 Canvas 宽度和高度
• 在 20px 与 64px 的原始调优参数之间自动插值，兼顾不同尺寸下的粒子密度与清晰度
• 支持通过 color 设置粒子主颜色，并保留远近明暗层次
• auto / dark / light 主题模式
• 自动跟随祖先节点的 data-theme、.dark、.light 和系统主题
• speed 动画速度控制
• paused 暂停控制
• 支持 prefers-reduced-motion
• 离屏或标签页隐藏时自动暂停
• Canvas 属性和事件可直接透传
• Vue 3 演示页：基于 Reka UI 的状态切换、颜色选择、尺寸/速度滑杆、播放暂停和代码复制

本地运行

npm install
npm run dev

演示站默认运行在 http://localhost:5178。

构建

npm run typecheck
npm run build
npm run build:demo

使用

npm install thinking-orbs-vue3

<script setup lang="ts">
import { ThinkingOrb } from 'thinking-orbs-vue3';
</script>

<template>
  <ThinkingOrb
    state="searching"
    :size="96"
    color="#7c3aed"
    :speed="1.2"
  />
</template>

Props

| 属性 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | state | OrbState | working | 动画状态 | | size | number | 64 | Canvas 的宽度和高度（CSS 像素），支持任意非负数值 | | color | string | - | 粒子主颜色，支持浏览器可识别的 CSS 颜色；未设置时使用主题灰阶 | | theme | auto \| dark \| light | auto | 颜色主题 | | speed | number | 1 | 速度倍率 | | paused | boolean | false | 是否暂停 | | style | CSSProperties | - | Canvas 样式 |

其他属性（如 class、data-*、事件和 aria-label）会传递给内部 <canvas>。设置 size 后，组件会同步更新 Canvas 的 CSS 宽高与高清 backing store。