Search

Search components and blocks

Sign in

Dither Voice Orb

New

A globe for voice assistants, drawn in ordered dither: a crisp rim, a pale lower half and a cloudy dark upper half that drifts. Feed it a 0 to 1 voice level and the whole globe swells and shrinks with the sound; idle breathes slowly, thinking holds a steady pulse. The level is eased so a jumpy microphone still reads as one smooth size change, and the label under it rolls between states. Click the globe to cycle through them.

pnpm dlx shadcn@latest add @ditherui/dither-voice-orb

Install

$ pnpm dlx shadcn@latest add @ditherui/dither-voice-orb

Props

state"idle" | "listening" | "thinking" | "speaking""idle"
levelnumber (0 to 1)0
color"indigo" | "violet" | "emerald" | "sky" | "amber" | "rose""indigo"
sizenumber160
labelsRecord<VoiceState, string> | null{ idle: "Tap to talk", ... }
onClick() => void—
classNamestring—

When to use the dither voice orb

Use it as the visual for voice assistants. It is a globe drawn in ordered dither that reacts to a 0 to 1 voice level.

  • Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components