For agents
A skill file, a chooser, and a JSON catalog. An agent installs an orb, maps the app's status onto its state, and can read every parameter back.
What an agent does with it
- Picks an orb from the chooser, or the full catalog in llms.txt.
- Installs it with the shadcn CLI. The runtime file comes with it.
- Maps the app's status onto
state— idle, thinking, speaking. That is the whole integration. - When asked to tune the look, reads the orb's params from the API and passes
params, or retunes one state withstatePresets.
How to call it
Put the skill in the folder the agent already reads, install an orb, and ask for the UI.
https://orbkit.zzzzshawn.cloud/skill.md
https://orbkit.zzzzshawn.cloud/skill/recipes.mdnpx shadcn@latest add https://orbkit.zzzzshawn.cloud/r/shdr-11.json
import { Shdr11 } from "@/components/ui/shdr-11";
const orbState =
status === "connecting" ? "thinking"
: isAgentSpeaking ? "speaking"
: "idle";
<Shdr11 size={320} state={orbState} />Machine-readable
- llms.txt — Overview, chooser, props, every orb
- agents.md — This page as markdown
- skill.md — Agent skill with frontmatter
- skill/recipes.md — JSX recipes the skill loads
- api/v1/components — JSON catalog
- api/v1/components/{slug} — One orb: params, colours, presets
- openapi.json — OpenAPI 3.1
- r/{slug}.json — shadcn registry item
States
idle— calm, slow drift — the agent is listening or waitingthinking— restless motion with a slow wander — the agent is workingspeaking— fast, bright, strongly precessing — the agent is talking
Each state synthesizes two volume signals, input (user speech energy) and output (agent speech energy), which the shader reads. Pass real levels through volumes when you have them.
Chooser
| The ask | Try first |
|---|---|
| A voice-assistant avatar with a clear state read | shdr-11 (quantum orbital, rainbow chroma), shdr-26 (a crazed web of coloured threads knotted to a cell grid), shdr-13 (plasma globe: crawling lightning filaments) |
| Calm glass for a product hero or a loading state | shdr-01 (cut-glass orb with a dispersive, turbulent interior), shdr-25 (the folds of a warped field, drawn by their own steepness), shdr-21 (light diffusing through a cloud) |
| Retro, terminal, pixel, CRT, print | shdr-23 (an ASCII glyph matrix in CRT green, wrapped on the ball), shdr-14 (a lit plasma dome quantized to chunky two-tone pixels), shdr-28 (nested binary grids shuttering on a tumbling bit-sphere), shdr-29 (an LED tile wall lighting up in flowing blobs, wrapped on the ball), shdr-33 (a thermal image, risograph-printed on the ball), shdr-27 (a weather-radar mosaic, fronts of coloured pixels sweeping the ball) |
| Nature: water, weather, cloud | shdr-16 (sunlight through water — a caustic net crawling over the ball, fringing into colour where it moves), shdr-20 (a water film rushing down the ball, fountain-style), shdr-21 (light diffusing through a cloud), shdr-17 (a grainy many-coloured storm with band shear and lightning) |
| Cosmic: galaxy, crystal, corona | shdr-32 (a galaxy marched as gas and dust inside the ball), shdr-18 (a crystal folded out of one eighth of space, tumbling), shdr-31 (raymarched shell, volumetric godrays), shdr-22 (field lines swirling around the ball about a wandering axis) |
| Ornament and pattern | shdr-02 (ornate scrollwork on a rolling dome), shdr-19 (beads swelling and shrinking in their cells, packed over the ball), shdr-30 (a meadow folding into itself toward a blue vanishing point) |
Every orb with its one-line look is in llms.txt; every prop is on the usage page (16 shared props, then per-orb params).
Rules
- One orb per agent, driven by state. Do not animate it yourself.
- Override only params the orb declares; read them from the API. Do not invent keys.
- Retune a state with statePresets, not by forking the orb file.
- Install through the shadcn CLI, never npm. Two files land; they import nothing but React.
- Keep mounted orbs under about a dozen per page — each is a WebGL context.
- Use the wrapper prop for a bezel; never add a border that changes the footprint.
Try it
Prompts that exercise the skill.
Build the call screen for our voice agent. It has connecting, listening, and speaking states from the SDK.
Use an Orbkit orb as the avatar. Map connecting to thinking, listening to idle, speaking to speaking. Feed the mic level into volumes.input. Don't animate it yourself.The thinking state on our orb is too busy for the dashboard.
Read the orb's params from the API and pass a statePresets override for thinking only. Keep idle and speaking as shipped.