Drop-in component
One import and one JSX element. Pick an orb, set a size, done.
GPU shader orbs for React Native and Expo
Living light for your React Native app.
33 GPU-rendered shader orbs as drop-in components. Tune them live, let them react to touch, and let adaptive quality keep them smooth. Built for voice and AI interfaces.
npx expo install react-native-shader-orbs react-native-webgpu react-native-reanimated react-native-worklets- Open source
- TypeScript
- Agent-ready
- Alpha
WebGPU isn't available in this browser
This is live: tap it, or press and hold.
33shader orbs
34live params, up to
3moods per orb
~55 fpson a mid-range Android phone, at 0.75x
Built onExpoReact NativeWebGPUTypeScriptReanimatedMCP
Features
Everything an orb needs, nothing it doesn't
Live parameters
Each orb exposes its own typed, range-checked knobs (up to 34). Changes ease in with springs, so nothing snaps.
Reacts to touch
A tap sends a pulse through the orb. Holding makes it swell and speed up, then it eases back on release.
Adaptive quality
Auto mode renders at a lower resolution and steps it down when the frame rate drops. A frame cap saves battery.
Three moods and audio
Every orb ships idle, thinking and speaking presets, plus input and output volume to drive it from a voice or mic level.
The same shaders on the web
The orbs on this page are the same WGSL, driven by the same code, rendered through the browser's WebGPU.
One component
Import an orb. Render it.
Props update the orb live without re-mounting it, and anything you don't set falls back to the orb's own defaults and its mood presets.
typescript
import { ShaderOrb, orb01 } from "react-native-shader-orbs";
export default function Screen() {
return (
<ShaderOrb
orb={orb01}
state="speaking"
colors={{ tint: "#66ccff" }}
params={{ speed: 1.2 }}
size={320}
interactive
/>
);
}Gallery
Pick an orb
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
WebGPU isn't available in this browser
Built for AI agents
Your coding assistant won't guess a parameter again.
Parameter names and ranges differ for every orb, and a wrong guess gives you a black orb. One command gives Claude Code, Cursor, Copilot and Codex an MCP server, a skill and instructions that look the real values up.
bash
npx react-native-shader-orbs-mcp init- MCP config for Claude Code, Cursor and VS Code
- A Claude Code skill and an AGENTS.md block
- llms.txt and a full-text export for browsing agents
How it works
Compiled shaders, one tiny renderer
- 1Compile once
The shaders are written in TypeGPU. A codegen step resolves each one to plain WGSL plus its parameter metadata.
- 2Render with raw WebGPU
At runtime a fullscreen triangle and one uniform buffer go through react-native-webgpu. All orbs share one GPU device and cached pipelines.
- 3Drive it from props
Springs ease every value toward its target, so changing a prop is smooth and doesn't rebuild anything.
Before you start
What it needs
Development build
Expo Go can't load the native WebGPU module.
Peer packages
react-native-webgpu, react-native-reanimated and react-native-worklets.
Tested on Android
One physical device, React Native 0.88, Expo SDK 58.
Non-commercial shaders
Unless you get XorDev's permission. Details.
FAQ
Questions
Put something alive on screen.
Install it, render an orb, and tune it live in the playground.