Orbkit — shader orbs you own

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 shared runtime comes along automatically.

npx shadcn@latest add @orbkit/shdr-01

Or install every orb at once:

npx shadcn@latest add @orbkit/all

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.