# Fluid Orb

> A React WebGL orb with drifting fluid shading for AI voice assistants and ambient loading states, inspired by ChatGPT's voice mode.

- Type: React component (AI Kit)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add fluid-orb`
- Docs: https://wingo-ui.com/components/fluid-orb

## Interaction

Ambient: the color patches drift left, right, up, down and diagonally on their own, blending and reforming with no interaction required. The top of the orb stays near white (highlightColor) while the middle and bottom take a pale tint and the full color. Honors prefers-reduced-motion by holding a still frame.

## Installation

```bash
npx wingo-ui@latest add fluid-orb
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/fluid-orb.json`

Files:

- `components/ui/fluid-orb.tsx`

Wingo UI dependencies (installed automatically):

- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

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

export function Demo() {
  return <FluidOrb size={280} color="#F75001" />
}
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color?` | `string` | `"#1A73F2"` | Any CSS color for the fluid: hex, rgb(), hsl(), oklch(), a name or var(--token). The middle and bottom bands are derived from it (a pale tint and the full color), while the top takes highlightColor. Anything the browser cannot parse falls back to the original blue. |
| `size?` | `number` | `240` | Diameter of the orb in pixels. The canvas renders at up to 2x device pixel ratio, so it stays crisp at any size. |
| `highlightColor?` | `string` | `"#FCFFFF"` | Any CSS color for the top of the orb, where the fluid thins out. The pale middle band is mixed from it and color. Anything the browser cannot parse falls back to near white. |
| `turbulence?` | `number` | `0.8` | How far the noise pushes the bands into each other. 0 gives smooth horizontal bands, higher values give deeper, more tangled waves. |
| `speed?` | `number` | `1` | Playback rate of the drift. 1 is the original pace, 0 holds the current frame, and changing it mid-flight bends the motion without a jump. |
| `paused?` | `boolean` | `false` | Freezes the drift on the current frame; color, size and turbulence still update. Unpausing picks up where it stopped. |
| `className?` | `string` |  | Extra classes merged onto the root element (data-slot="fluid-orb"). Other div props are spread onto it too. |
| `style?` | `React.CSSProperties` |  | Inline styles merged after the size, so a width or height here overrides the size prop. |

## Examples

- **Voice assistant states**: Tap the mic to move from idle to listening to thinking; speed and turbulence follow, bending the motion without a jump.
- **Colors**: Any CSS color; the middle band is mixed toward highlightColor, here pink-white for the purple orb.
- **Empty AI chat**: A small, slow orb above the greeting and a few suggested prompts.

## See also

- [Matrix Orb](https://wingo-ui.com/components/matrix-orb) ([Markdown](https://wingo-ui.com/components/matrix-orb.md))
- [Voice Input](https://wingo-ui.com/components/voice-input) ([Markdown](https://wingo-ui.com/components/voice-input.md))
- [Reasoning Indicator](https://wingo-ui.com/components/reasoning-indicator) ([Markdown](https://wingo-ui.com/components/reasoning-indicator.md))
- [AI Chat](https://wingo-ui.com/components/ai-chat) ([Markdown](https://wingo-ui.com/components/ai-chat.md))
- [Spinner](https://wingo-ui.com/components/spinner) ([Markdown](https://wingo-ui.com/components/spinner.md))

## Credits

- Inspired by chatgpt.com

---

Canonical: https://wingo-ui.com/components/fluid-orb
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt