Browse components
Matrix Orb
A liquid metaball orb for voice or AI status: it breathes when idle, ripples when listening and churns off droplets when thinking.
Credit: Calamansi UI (MIT)
Installation
npx shadcn@latest add @glint-ui/matrix-orbFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/matrix-orb.json
Usage
import { MatrixOrb } from "@/components/ui/matrix-orb";
<MatrixOrb state="listening" variant="calamansi" size={200} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "calamansi" | "white" | "slate" | "citrus" | "calamansi" | Body ink. |
| size | number | 240 | Stage width and height, in px. |
| lobes | number | 5 | Satellites around the core. More means a busier body. |
| gooey | boolean | true | Run the metaball fuse. Off, the circles just overlap. |
| threshold | number | 19 | Alpha ramp slope: how hard the fused edge is. |
| caption | boolean | true | Show the state caption under the orb. |
| color | string | — | Body colour, overriding the variant ink. |
| state | "idle" | "listening" | "thinking" | "idle" | What the orb is doing. The demo cycles it. |
| level | number | — | Drive the amplitude yourself (e.g. an audio level), 0-1. |
| labels | ReactNode | — | Caption per state, e.g. `{ thinking: "Working" }`. |
| viscosity | number | — | Fuse blur in px. Defaults to 0.078 of the size. |
| waviness | number | — | Max px the edge undulates. Defaults to 0.012 of the size. |
| wavinessFreq | number | 0.018 | Noise frequency of the edge undulation. |
| shadow | string | — | CSS filter for the cast shadow; "none" for a bare orb without shadow or rim. |
| className | string | — | Extra classes for the root element. |