Bars ThemeNew

A traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to right so the wave appears to travel across. Volume scales bar heights with a diamond-shaped idle boost.

Interaction Type

Switch between idle, listening, speaking, connecting, and thinking states. Hover over the bars to see the diamond-shaped boost effect. Volume drives bar height reactively.

Props

Options you can pass to customize this component.

Prop

Type

Description

state

idleconnectinglisteningthinkingspeakingerror

The current orb state. Controls bar color, animation pattern, and wave behavior.

volume

number

Audio volume level from 0 to 1. Drives bar height scaling.

size

number

Width and height of the bars 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/bars-theme.json

How to use

import { BarsTheme } from "@/components/ui/bars-theme"

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

Source Code

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

Credits

Faithful port of alexanderqchen/orb-ui BarsTheme

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/bars-theme.json