R
视觉与动效FluidOrbWebGLCanvas零依赖

流体光球

一个 WebGL 光球，内部有缓慢漂移的流体着色。支持 size 与 color 属性，跟随系统主题减少动效设置。

上面的组件正在页面上实时运行，可以直接交互。

安装

在项目根目录执行下面的命令，组件源码会写入 @/components/ui/fluid-orb.tsx。

npx shadcn@latest add swamimalode07/rare-ui/fluid-orb

用法

组件默认导出（或具名导出）即可直接使用，不需要额外的 Provider。

fluid-orb.tsx
import FluidOrb from "@/components/ui/fluid-orb"


export function Demo() {
  return (
    <div className="flex items-center gap-10">
      <FluidOrb size={180} color="#fc4c01" />
      <FluidOrb size={120} color="#7c3aed" />
    </div>
  )
}

属性

下表列出了该组件公开的主要属性，所有未列出的原生属性都会透传到根元素。

属性类型默认值说明
sizenumber160光球直径（px）。
colorstring#fc4c01流体着色的基色，任意 hex。
classNamestring—额外的外层样式。