Thinking Orb

基础用法

Thinking Orb

交互契约

• state 默认为 'random'：形态在挂载时掷一次，此后终生不变。要换一颗球，就重建组件（换 key），而不是改 prop。
• 9 种形态为 working、searching、solving、listening、connecting、weaving、composing、breathing、shaping。
• 所有已挂载的球共用同一个时钟（performance.now），因此同屏多颗球天然同相位，不会各转各的。
• 离屏时通过 IntersectionObserver 停止绘制，标签页隐藏时同样停摆——长列表里挂很多颗不会持续吃 CPU。
• 用户开启「减少动态效果」时不播放动画，改为绘制一帧有代表性的静止画面；主题切换仍会跟随。
• size 只接受 20 与 64：预设的几何参数是按这两个尺寸手工调过的。要显示成别的尺寸请用 displaySize，它只改 CSS 尺寸，不改绘制参数。
• 画布按 devicePixelRatio 提升分辨率，上限为 2。
• 无 canvas 环境（如 jsdom）下 getContext('2d') 返回空，组件保留元素但跳过绘制，不会抛错。
• 可访问名称默认按形态给出英文文案（如 Searching…），label 可覆盖。

API

Props

Events

TxThinkingOrb 不派发组件事件。

Slots

TxThinkingOrb 不暴露插槽。它是一个纯绘制元素，文案请放在相邻节点上。

最佳实践

• 想让每次思考都换一颗球，就给组件绑定与该次思考对应的 key；改 state 是没用的。
• 需要固定形态时显式传 state，不要依赖随机——否则截图测试与录屏每次都不一样。
• size 只传 20 或 64，视觉尺寸用 displaySize 调；直接传别的值会让预设失真。
• 中文界面记得传 label，默认文案是英文。
• 一次思考只挂一颗球。多颗虽然同相位，但会让「正在进行」的语义变得含糊。