Fluid OrbNew

A WebGL fluid orb in muted/neutral design tokens (follows light and dark theme). Sphere normals, fBm noise, glass highlights, and a pulsing core driven by audio level.

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

Optional hex override. When omitted, uses --color-muted so the orb stays neutral and theme-aware.

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