Orbkit — shader orbs for agent states

Each orb is a fragment shader rendered into a transparent canvas by a small dependency-free WebGL runtime. There is no three.js, no scene graph, and no npm package to depend on — you install the source into your project and edit it like any other component.

• Two files per install: the shared runtime and the orb itself.
• Zero runtime dependencies. The orb renders on a canvas and needs no CSS beyond your own layout.
• Every shader uniform is a documented, range-checked parameter you can tune in the playground.

Add an orb through the shadcn CLI. The command points straight at the public repository, so there is nothing to configure, and the shared runtime comes along automatically.

npx shadcn@latest add zzzzshawn/orbkit/shdr-01

Or install every orb at once:

npx shadcn@latest add zzzzshawn/orbkit/all

Prefer the @orbkit namespace? Add the registry to your components.json once, then install by name:

"registries": {
  "@orbkit": "https://orbkit.zzzzshawn.cloud/r/{name}.json"
}

npx shadcn@latest add @orbkit/shdr-01

The runtime and 14 of the orbs are MIT. The other 19 are ported from shaders by @XorDev with his permission and are for non-commercial use only, with attribution. Each of those files says so in a header comment, the registry marks them with a credit field, and the orb drawer shows it.

Orbs are built for voice and agent UIs, so they take a state rather than a pile of animation props. Each state synthesizes two volume signals — input (user speech energy) and output (agent speech energy) — which the shader reads as uniforms.

• idle — calm, slow drift.
• thinking — restless motion with a slow wander.
• speaking — fast, bright, strongly precessing.

Params glide between states rather than snapping, and rate params are integrated into a clock, so a state change never jumps the animation phase.

React 18 or later and a browser with WebGL 1. The runtime is a client component ("use client") and renders nothing on the server. It respects prefers-reduced-motion by drawing a single static frame, and pauses itself when scrolled out of view.