//
A high-performance 3D halftone point-cloud component representing AI states (working, searching, solving, listening, composing, shaping).
bun add xiod-ui1import { Orb, OrbBadge, OrbLabel } from "xiod-ui/orb";1<Orb>2 <OrbLabel />3 <OrbBadge />4</Orb>| Prop | Type | Default | Description |
|---|---|---|---|
state | OrbState| undefined | working | AI status state / animation preset |
pixelSize | number| undefined | calculated from CVA size | Explicit pixel size override |
theme | OrbTheme| undefined | auto | Theme mode resolution |
speed | number| undefined | 1 | Speed multiplier |
paused | boolean| undefined | false | Pause animation loop |
color | string| undefined | - | Custom ink color override (CSS hex, rgb, or color) |
interactive | boolean| undefined | false | Interactive hover speed boost |
aria-label | string| undefined | - | Accessibility label |
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
size | "sm"| "lg"| "xs"| "md"| "xl"| "2xl"| null| undefined | lg | |
variant | "default"| "expressive"| "classic"| "sharp"| "diamond"| "ring"| "cross"| null| undefined | default | |
intent | "default"| "primary"| "secondary"| "success"| "warning"| "destructive"| "info"| null| undefined | default | |
glow | "none"| "subtle"| "intense"| null| undefined | none |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| Prop | Type | Default | Description |
|---|---|---|---|
render | ReactElement<unknown, string| JSXElementConstructor<any>>| ComponentRenderFn<HTMLProps, {}>| undefined | - | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |