ASCII orbPro

A voice orb drawn in Geist Mono cells. Glyph density follows the light and the voice, in short ticks that read as motion. A drop-in swap for the free voice orb.

Markdown

On this page

ProA sphere of Geist Mono cells whose glyph density follows the light and the voice.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/ascii-orb

Usage

tsx

import { AsciiOrb } from "@/components/ui/chatcn/pro/ascii-orb"

<AsciiOrb state={voice.state} level={voice.getLevel} size="lg" />

The orb is a <pre> grid, sized from the real cell width of your mono font through the shared glyph atlas, so it fills its box exactly. Louder speech pushes cells up the ramp and makes neighbors flicker, the ASCII version of grain. The text updates about 14 times a second.

Examples

Voice call

ProA scripted call to a clinic front desk: connecting, listening, thinking and speaking, with mute and end call.

States, sizes and reduced motion

ProAll eight voice states, the four 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
`columns`	`number`	Cells across. Default about one per 5.4 px
`ramp`	`string`	Glyphs from light to dense. Default `.:-=+*#%@`

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 and the text grid are 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: active the effect hides and a plain outline keeps the orb's place. Under prefers-contrast: more the marks snap to the text token.

Motion

Each state is a target form. The orb eases toward it every frame with a critically damped approach, so any state can follow any other and nothing bounces. Interrupted snaps in quickly; the rest settle over about half a second.
Loops run on the shared frame clock and stop offscreen, in hidden tabs and when paused. Time stops with them, so resuming continues instead of jumping.
Under reduced motion each state is one still frame, redrawn only when the state changes.