Fluid AI Orb

A circular WebGL fluid for AI idle and thinking states. Pass size and color to match your brand.

A WebGL fluid orb for AI idle and thinking states. Respects prefers-reduced-motion.

Loading…

Installation

CLI

npx @sonojs/ui@latest add fluid-orb

fluid-orb.tsx

import { FluidOrb } from "@/components/sonojs/fluid-orb"

export function Example() {
  return <FluidOrb size={160} color="#1A73F2" />
}

Prop	Type	Default	Description
size	number	240	Orb diameter in CSS pixels.
color	string	"#1A73F2"	Hex tint mixed into the fluid shader.
className	string	—	Merge classes on the rounded wrapper.
…div props	React.ComponentProps<"div">	—	Pass-through props for the wrapper.