Orb
orb指针交互光球 · WebGL/ogl 发光能量球 + hover 增亮/旋转 + hue 色相 + reduced-motion 径向渐变球
用法
基础用法
Orb 填满父容器（block h-full w-full），由外层方形容器决定尺寸；默认蓝紫色系。
tsx
<div className="relative h-[280px] w-[280px] overflow-hidden rounded-2xl bg-bg">
<Orb />
</div>色相旋转
hue 以度为单位旋转 YIQ 色相：约 120 偏绿、60 偏琥珀、300 偏紫红。
tsx
<Orb hue={120} />强制悬停态
forceHoverState 常驻发光+扭曲，适合演示/截图；hoverIntensity 调扭曲强度。
tsx
<Orb forceHoverState hoverIntensity={0.4} />尺寸与禁用旋转
尺寸由外层容器控制；rotateOnHover={false} 关闭悬停自转。
tsx
<div className="relative h-40 w-40 overflow-hidden rounded-2xl bg-bg">
<Orb rotateOnHover={false} />
</div>何时用
需要一个聚焦视线的发光能量球做 hero/卡片/空状态焦点元素，且希望随指针 hover 产生增亮、扭曲、旋转反馈时用。它是「焦点元素」——canvas 填满外层方形容器，尺寸由容器决定。若要的是铺满整面的流动金属背景层用 LiquidChrome；只要静态点阵/网格底纹用 DotPattern / GridPattern。
导入
ts
import { Orb } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| hue | number | 0 | 色相旋转（度）。0 = 原始蓝紫；正值顺时针旋转 YIQ 色相 |
| hoverIntensity | number | 0.2 | 悬停扭曲强度（0–1），越大变形越明显 |
| rotateOnHover | boolean | true | 悬停时是否自动旋转光球 |
| forceHoverState | boolean | false | 强制保持悬停激活态（演示 / 截图场景用） |
| className | string | — | 透传到 canvas（正常）或 fallback div（降级）的 className |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| fallback | ReactNode | reduced-motion / 无 WebGL 时的静态备用内容（置于径向渐变球中央） |
禁忌 / 坑
- WebGL 组件，必须在客户端渲染；SSR 环境下首屏走 reduced-motion / 无 WebGL 的径向渐变 fallback，需保证
fallback或默认渐变球在服务端可见。 - cleanup 时不要主动调
loseContext毒化 canvas，否则 React StrictMode 双挂载复用同一 canvas 会直接崩、空白——参见 [[webgl-canvas-loseContext-poisons-strictmode-remount]]，正确做法是每次挂载新建 canvas。 - canvas 填满外层容器，外层必须有确定的宽高（方形最佳），否则光球塌缩不可见。
相关
DotPattern · GridPattern · StripedPattern · Spotlight · RetroGrid · Ripple
Playground
<div className="relative h-[280px] w-[280px] overflow-hidden rounded-2xl bg-bg">
<Orb
hue={0}
hoverIntensity={0.2}
rotateOnHover={true}
forceHoverState={false}
/>
</div>