KQ-1617 · GLASS/TRIO

Glass Trio

An assistant's presence as three glass beads drawn as one liquid body: any two beads that come close are joined by a metaball neck, and an SVG lighting filter turns the blurred outline into a height map, so the union reads as one piece of glass with a tinted body, a refracting rim, a highlight whose sharpness is gloss and a soft caustic. Idle, they breathe apart and together on the drift spring, necks forming as they meet; listening, they slide into a line on snap and bob with the input level, each a beat behind the last; thinking, they orbit and spiral in on glide until they merge into one bead with a slow light turning inside; speaking, the bead pulses with the voice and sheds drops that fall back through a neck. It is an image named for its state, or a button when onPress is given (Enter or Space press it).

KQ-1617 · GLASS/TRIO

Ask Waylight

Tap the glass and speak

idle · playing the exchange

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/glass-trio

Props

state: "idle" | "listening" | "thinking" | "speaking"; default "idle"; What the assistant is doing.
level: number | (() => number); default 0; The input or voice level, 0 to 1: a number, or a function read every frame so a live level never re-renders.
tint: "accent" | "signal" | "warn" | "clear" | string; default "accent"; The glass's colour: cobalt, mint, amber or clear, or any CSS colour.
gloss: number; default 0.6; How wet the glass looks, 0 (a soft sheen) to 1 (a small, sharp highlight).
size: number; default 16; Radius of each bead, px; the trio's box is 8.4 by 6.6 radii.
breath: number; default 5200; How long one idle breath takes, ms.
orbit: number; default 0.45; How fast the beads orbit while thinking, turns per second.
shed: number; default 0.6; How readily the speaking bead sheds drops, 0 (never) to 1 (on every syllable).
follow: boolean; default true; Lean a little toward a pointer over the trio.
paused: boolean; default false; Hold everything still.
label: string; default "Assistant"; Who the trio is, for its accessible name.
onPress: () => void; default —; Makes the trio a button (tap to talk); a press squeezes the beads together.
disabled: boolean; default false; Dims the trio, and a press does nothing.
className: string; default —; Classes for the trio's box; its size comes from size.

Prop	Type	Default	Description
state	"idle" \| "listening" \| "thinking" \| "speaking"	"idle"	What the assistant is doing.
level	number \| (() => number)	0	The input or voice level, 0 to 1: a number, or a function read every frame so a live level never re-renders.
tint	"accent" \| "signal" \| "warn" \| "clear" \| string	"accent"	The glass's colour: cobalt, mint, amber or clear, or any CSS colour.
gloss	number	0.6	How wet the glass looks, 0 (a soft sheen) to 1 (a small, sharp highlight).
size	number	16	Radius of each bead, px; the trio's box is 8.4 by 6.6 radii.
breath	number	5200	How long one idle breath takes, ms.
orbit	number	0.45	How fast the beads orbit while thinking, turns per second.
shed	number	0.6	How readily the speaking bead sheds drops, 0 (never) to 1 (on every syllable).
follow	boolean	true	Lean a little toward a pointer over the trio.
paused	boolean	false	Hold everything still.
label	string	"Assistant"	Who the trio is, for its accessible name.
onPress	() => void	—	Makes the trio a button (tap to talk); a press squeezes the beads together.
disabled	boolean	false	Dims the trio, and a press does nothing.
className	string	—	Classes for the trio's box; its size comes from size.