Fluid Orb

A calm, monochrome WebGL fluid orb drawn from neutral design tokens with a subtle accent tint in its highlights and core. Colors are resolved from CSS variables and follow light and dark theme.

Interaction Type

The orb pulses automatically with a simulated speaking cadence. Pass an audioLevel (0-1) to drive it with real microphone amplitude. Switch neutral tones in the preview (foreground / muted / subtle).

Props

Options you can pass to customize this component.

Prop

Type

Description

size

number

Diameter of the orb in pixels. Defaults to 280.

color

string

Base tone as any CSS color, including a token such as var(--color-fg). Defaults to var(--color-muted).

accentColor

string

Tint mixed into the fluid highlights and pulsing core. Defaults to var(--color-accent).

audioLevel

number

Real microphone amplitude from 0 to 1. When provided, overrides the built-in sine wave simulation.

className

string

Additional CSS classes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/fluid-orb.json

How to use

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

export function Demo() {
  return <FluidOrb size={300} />
}

Source Code

Click the code icon in the top-right corner to view the source code.

Credits

Inspired by OpenAI ChatGPT Advanced Voice Mode orb

Keep in mind

All components here are original implementations, built from scratch with no copied code, assets, or content. We study UI/UX patterns we admire and craft our own versions, often with added features. If your work inspired something here and isn't credited, or a credit is incomplete, please open an issue - we'll fix it promptly.

Contact

Questions or feedback? Reach out anytime.

License & Usage

•Free for personal and commercial use
•No attribution required
•Cannot be resold as a standalone product
•Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use

// No code loaded.

Muted

npx shadcn@latest addhttps://ui.nexvyn.dev/r/fluid-orb.json