Glow OrbNew

A WebGL fbm-noise glow orb with state-driven colors, volume-responsive scale and glow, idle and connecting pulse animations, and a settle-back transition.

Interaction Type

Switch between idle, listening, speaking, connecting, thinking, and error states. The orb scales and glows based on volume. Hover to see a subtle scale and brightness boost.

Props

Options you can pass to customize this component.

Prop

Type

Description

state

idleconnectinglisteningthinkingspeakingerror

The current orb state. Controls color palette, animation behavior, scale, and glow.

volume

number

Audio volume level from 0 to 1. Drives scale and glow intensity.

size

number

Width and height of the orb container in pixels.

disabled

boolean

Disables hover and click interactions.

interactive

boolean

Renders as a button instead of a div for click support.

Installation

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

How to use

import { GlowOrb } from "@/components/ui/glow-orb"

export function Demo() {
  return <GlowOrb state="listening" volume={0.4} size={200} />
}

Source Code

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

Credits

Port of alexanderqchen/orb-ui CircleTheme with FluidOrb shader

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.

idle

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