Orbkit is a React component library of WebGL shader orbs designed for AI and voice agent interfaces, aimed at developers building assistant UIs who need a visual element that signals what the agent is doing. Each orb is a fragment shader rendered into a transparent canvas by a small dependency-free WebGL runtime, with no three.js, no scene graph, and no npm package to depend on, so you install the source into your project and edit it like any other component. The launch matters now because voice and agent UIs are proliferating faster than the visual vocabulary for them, and most teams end up rebuilding the same "listening blob" from scratch.
The distribution model leans on shadcn rather than a package install. An orb is added through the shadcn CLI pointed at the public repository, dropping two files into your project (the shared runtime and the orb itself), with zero runtime dependencies and every shader uniform exposed as a documented, range-checked parameter you can tune in the playground. Orbs accept a state prop covering idle, thinking, and speaking behaviors out of the box, which lines up with how frameworks like ElevenLabs and LiveKit already model agent lifecycles.
The catalog ships with more than 30 orbs under a split license worth noting before adoption. The runtime and 14 of the orbs are MIT, while the other 19 are ported from shaders by @XorDev with his permission and are free for non-commercial use only, with attribution , marked in the registry and drawer so the terms are visible at install time. The project is built and maintained by Shawn (@zzzzshawn), with the source hosted on GitHub under the zzzzshawn/orbkit repository.
Comments (9)
Sign in to join the discussion.
P
Priya RaghavanSep 7, 2026
Every voice agent I've seen this year uses the same pulsing blue blob. Now we can have 30 flavors of the same pulsing blue blob, which is honestly progress.
M
Malik O.Sep 7, 2026
The shadcn integration is the move. If you'd shipped this as a standalone lib with its own theming system I would have closed the tab in 4 seconds.
B
Bram VandenbergSep 7, 2026
Do these work without WebGL? Asking for my users still on IE, which I assume is most of them.
M
mirrenSep 7, 2026
How's the docs situation? Also curious if the shaders are MIT or something spicier that'll make my legal team cry.
K
Kenji WatanabeSep 7, 2026
The landing page grid where each orb reacts live is doing more selling than the tweet copy. That's the actual demo.
S
Shreya M.Sep 7, 2026
The tweet needed a 6 second loop of orbs cycling through idle to speaking. You buried the whole product in a static screenshot.
N
Noor FadelSep 7, 2026
"WebGL shader orbs for React" is accurate but sleepy. Try "Give your AI a face" and watch installs climb.
D
Dmitri LarssonSep 7, 2026
Sorry, is a voice agent the thing where I press a button and it books a haircut? I'm still catching up on 2019.
A
Alastair FenwickSep 7, 2026
We had a whole internal design system for agent state visualization circa 2022 and it never shipped because someone argued the orbs looked too sentient. Godspeed.
Work With Us
Book an intro call to explore our suite of services. We might have a waitlist.
Orbkit
WebGL shader orbs for React.
WebGL shader orbs for React.
Tags
TLVC Rating
Community Rating
No ratings yet
to rate this launch.
Orbkit is a React component library of WebGL shader orbs designed for AI and voice agent interfaces, aimed at developers building assistant UIs who need a visual element that signals what the agent is doing. Each orb is a fragment shader rendered into a transparent canvas by a small dependency-free WebGL runtime, with no three.js, no scene graph, and no npm package to depend on, so you install the source into your project and edit it like any other component. The launch matters now because voice and agent UIs are proliferating faster than the visual vocabulary for them, and most teams end up rebuilding the same "listening blob" from scratch. The distribution model leans on shadcn rather than a package install. An orb is added through the shadcn CLI pointed at the public repository, dropping two files into your project (the shared runtime and the orb itself), with zero runtime dependencies and every shader uniform exposed as a documented, range-checked parameter you can tune in the playground. Orbs accept a state prop covering idle, thinking, and speaking behaviors out of the box, which lines up with how frameworks like ElevenLabs and LiveKit already model agent lifecycles. The catalog ships with more than 30 orbs under a split license worth noting before adoption. The runtime and 14 of the orbs are MIT, while the other 19 are ported from shaders by @XorDev with his permission and are free for non-commercial use only, with attribution , marked in the registry and drawer so the terms are visible at install time. The project is built and maintained by Shawn (@zzzzshawn), with the source hosted on GitHub under the zzzzshawn/orbkit repository.
Comments (9)
Every voice agent I've seen this year uses the same pulsing blue blob. Now we can have 30 flavors of the same pulsing blue blob, which is honestly progress.
The shadcn integration is the move. If you'd shipped this as a standalone lib with its own theming system I would have closed the tab in 4 seconds.
Do these work without WebGL? Asking for my users still on IE, which I assume is most of them.
How's the docs situation? Also curious if the shaders are MIT or something spicier that'll make my legal team cry.
The landing page grid where each orb reacts live is doing more selling than the tweet copy. That's the actual demo.
The tweet needed a 6 second loop of orbs cycling through idle to speaking. You buried the whole product in a static screenshot.
"WebGL shader orbs for React" is accurate but sleepy. Try "Give your AI a face" and watch installs climb.
Sorry, is a voice agent the thing where I press a button and it books a haircut? I'm still catching up on 2019.
We had a whole internal design system for agent state visualization circa 2022 and it never shipped because someone argued the orbs looked too sentient. Godspeed.