Pixel orbPro
A voice orb on a coarse grid of rounded square cells, like an LED panel, for pixel themed products. Four lit steps per cell, rings that say who is talking, and every voice state. A drop-in swap for the free voice orb.
On this page
ProThe orb on a coarse grid of rounded square cells. Pick a state; listening and speaking follow simulated levels.
Installation
Usage
import { PixelOrb } from "@/components/ui/chatcn/pro/pixel-orb"
<PixelOrb state="speaking" outputLevel={agent.getLevel} size="xl" cells={20} />The lit sphere of the shared orb form, sampled at each cell center and stepped to one of four levels. Unlit cells inside the disc stay faintly visible, so the panel reads as hardware. Set cellRadius to 0 for square pixels and cells for a coarser or finer grid.
Examples
States, sizes and reduced motion
ProAll eight voice states, the sizes and the still frames drawn under reduced motion.
Props
| Prop | Type | Notes |
|---|---|---|
state | "idle" | "connecting" | "listening" | "thinking" | "speaking" | "interrupted" | "muted" | "error" | Default idle. Same states as VoiceOrb |
level, inputLevel, outputLevel | number | () => number | 0 to 1. Input drives listening, output drives speaking. A getter animates without re-rendering |
simulate | boolean | Speech-like levels where none are passed, for demos |
size | "sm" | "md" | "lg" | "xl" | number | 40, 72, 144, 224 px. Default lg |
reducedMotion | boolean | Force it on or off. Defaults to the user's setting |
label | string | Accessible name. Default "Voice: listening" and so on |
ink | string | Token or CSS color for the marks. Default var(--chatcn-fg) |
paused, defaultPaused, onPausedChange | boolean | Controlled or uncontrolled pause |
pauseControl | boolean | Show the pause button. Default on from 120 px |
cells | number | Cells across. Default about one per 9 px, from 7 to 29 |
cellRadius | number | Corner radius as a share of the cell. Default 0.3 |
cellGap | number | Gap as a share of the cell. Default 0.16 |
Keyboard
| Key | Action |
|---|---|
Tab, Enter | Focus and toggle the pause button, when it shows |
Accessibility
- One
role="img"named by state, "Voice: speaking", exactly like the free voice orb. Announce state changes in your own live region, as the examples do. - The canvas is
aria-hidden; nothing animated is read out. - Error uses the red token and the state label as its backup, never color alone.
- Under
forced-colors: activethe canvas hides and a plain outline keeps the orb's place. Underprefers-contrast: morethe marks snap to the text token.
Motion
- Each state is a target form on the shared orb driver, eased with a critically damped approach, so any state can follow any other and nothing bounces. Interrupted snaps in; the rest settle over about half a second.
- Waves say who is talking: they run inward to the front of the sphere while the user speaks and outward while the agent speaks. The direction eases over about 200 ms, so it never flips mid ring.
- The loop runs on the shared frame clock and stops offscreen, in hidden tabs and when paused. Under reduced motion each state is one still frame.
- Cells ease between steps in about 80 ms at 24 fps, so the picture moves in clean pixel steps without blinking.