What's interesting
- Thirty-three WebGL orbs for Idle, Thinking, and Speaking
- Install one shader at a time through the shadcn registry
- React and TypeScript, built for agent chrome
Use in your project
Install
npx shadcn@latest add zzzzshawn/orbkit/shdr-11- Pick an orb from the gallery that matches your agent state language.
- Install with the shadcn add command for that SHDR id.
- Map product status to idle, thinking, or speaking on the component.
Prompt your agent
From AI UX Playground: https://aiuxplayground.com/inspirations/orbkit
Orbkit by zzzzshawn
By zzzzshawn. Drop an orb into agent chrome and switch idle, thinking, or speaking. Browse SHDR-01 through SHDR-33, then install one via shadcn (source stays in your repo). React and TypeScript. Nineteen shaders are XorDev ports for non-commercial use with attribution; the runtime and the other fourteen are MIT.
Add an Orbkit shader orb to our agent UI.
Install (no registry setup needed):
npx shadcn@latest add zzzzshawn/orbkit/shdr-11
Prefer an MIT orb for commercial work (e.g. shdr-11 Hydrogen, shdr-13 Ion, shdr-21 Nimbus, shdr-14 Dither). XorDev ports (including shdr-01 Dispersion) are non-commercial with attribution only.
Usage:
import { Shdr11 } from "@/components/ui/shdr-11";
<Shdr11 size={280} state="idle" />
Map our product status to Orbkit states: idle | thinking | speaking.
Example: connecting → thinking, agent speaking → speaking, else idle.
Override uniforms only when needed:
<Shdr11 state="speaking" params={{ glow: 1.4, chromaSpread: 0.3 }} />
Place in [composer | sidebar | inline]. Stack: React + TypeScript.
Respect prefers-reduced-motion (Orbkit draws one frame and stops).
If you need more orb picks or param schemas, use orbkit.zzzzshawn.cloud/llms.txt and /agents after you start from the Playground page above.
