Orbkit
WebGL shader orbs for agent states: idle, thinking, speaking. Thirty-three looks, installable one at a time through shadcn.
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/playground/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.
