# shader orbs

> 33 WebGPU shader orbs as drop-in React Native components. Live parameters, tap and hold interaction, adaptive quality.

- Development build required: it relies on a native WebGPU module that Expo Go does not include.
- Peer packages: react-native-webgpu, react-native-reanimated, react-native-worklets.
- Tested on Android (one physical device). iOS is untested.
- The library is MIT. The shaders are by XorDev and are licensed for NON-COMMERCIAL use with attribution; commercial use needs XorDev's permission.
- AI agents: run `npx react-native-shader-orbs-mcp init` in an app to set up the MCP server, a skill and AGENTS.md. Parameter and color keys differ per orb, so look them up instead of guessing.
- Published on npm as react-native-shader-orbs@0.1.0-alpha.4 (alpha: the API may change).

## Docs

- [Introduction](https://react-native-shader-orbs.vercel.app/docs/): react-native-shader-orbs gives React Native and Expo apps 33 GPU shader "orbs": glowing, flowing spheres rendered live with WebGPU. You import one, render it, and tune it with props.
- [Installation](https://react-native-shader-orbs.vercel.app/docs/installation/): expo install picks the versions that match your Expo SDK. Reanimated and Worklets are required by react-native-webgpu, not by the orbs themselves.
- [Quick start](https://react-native-shader-orbs.vercel.app/docs/quick-start/): Every orb is exported by name: orb01 through orb33.
- [Customizing an orb](https://react-native-shader-orbs.vercel.app/docs/customizing/): An orb is driven by four kinds of input: parameters, colors, a mood (state), and two volumes. All of them update live, and all of them ease toward their new value instead of jumping.
- [Touch interaction](https://react-native-shader-orbs.vercel.app/docs/interaction/): Add interactive and the orb responds to touch. It's off by default.
- [Performance](https://react-native-shader-orbs.vercel.app/docs/performance/): These orbs are ray-marched: for every pixel, the shader steps through a volume dozens of times.
- [Troubleshooting](https://react-native-shader-orbs.vercel.app/docs/troubleshooting/): You're running without the native code.
- [ShaderOrb](https://react-native-shader-orbs.vercel.app/docs/shader-orb/): The component that renders an orb.
- [Types and exports](https://react-native-shader-orbs.vercel.app/docs/types/): Everything is exported from react-native-shader-orbs.
- [MCP server and skills](https://react-native-shader-orbs.vercel.app/docs/mcp/): Everything an AI coding assistant needs to use react-native-shader-orbs correctly: an MCP server, a skill, and instruction files. One command sets them all up in your project.
- [Registry (JSON)](https://react-native-shader-orbs.vercel.app/docs/registry/): A machine-readable catalog of every orb, as plain JSON. Tools, scripts and AI assistants can read it to learn what orbs exist and what each one accepts, without scraping the docs.
- [How it works](https://react-native-shader-orbs.vercel.app/docs/how-it-works/): The shaders come from shadercn, a web component library built on vgpu and TypeGPU. This package takes the same shaders to React Native. Here's the path from there to your screen.
- [Licensing and credits](https://react-native-shader-orbs.vercel.app/docs/licensing/): All 33 orb shaders are original work by XorDev, used with permission through shadercn.
- [Changelog](https://react-native-shader-orbs.vercel.app/docs/changelog/): Everything that has been added so far, grouped by area.

## Orbs

- [ORB-01](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-01/): cut-glass orb with a dispersive, turbulent interior
- [ORB-02](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-02/): ornate scrollwork on a rolling dome
- [ORB-03](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-03/): a turbulent belt of light girdling the ball, contoured in rainbow
- [ORB-04](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-04/): a hollow shell of light, faceted by a voxel lattice
- [ORB-05](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-05/): rainbow rings travelling through a lattice of lenses
- [ORB-06](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-06/): a hundred glowing lattices stacked through the ball, interfering
- [ORB-07](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-07/): a twist wave travelling out through the ball around a lit column
- [ORB-08](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-08/): mother-of-pearl contour bands, each layer its own hue
- [ORB-09](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-09/): torn rings of rainbow light worn as the ball's latitudes
- [ORB-10](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-10/): a lattice of light knitted into the ball's own skin
- [ORB-11](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-11/): quantum orbital, rainbow chroma
- [ORB-12](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-12/): a ball of glossy toy bricks, studs up — it rebuilds itself while it thinks
- [ORB-13](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-13/): plasma globe: crawling lightning filaments
- [ORB-14](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-14/): a lit plasma dome quantized to chunky two-tone pixels
- [ORB-15](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-15/): an iridescent particle-track web worn as the ball's skin
- [ORB-16](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-16/): sunlight through water — a caustic net crawling over the ball, fringing into colour where it moves
- [ORB-17](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-17/): a grainy many-coloured storm with band shear and lightning
- [ORB-18](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-18/): a crystal folded out of one eighth of space, tumbling
- [ORB-19](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-19/): beads swelling and shrinking in their cells, packed over the ball
- [ORB-20](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-20/): a water film rushing down the ball, fountain-style
- [ORB-21](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-21/): light diffusing through a cloud
- [ORB-22](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-22/): field lines swirling around the ball about a wandering axis
- [ORB-23](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-23/): an ASCII glyph matrix in CRT green, wrapped on the ball
- [ORB-24](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-24/): a Minecraft Earth — a perfect voxel sphere whose seasons cycle it through lush, cherry-grove, ice, mesa and desert worlds
- [ORB-25](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-25/): the folds of a warped field, drawn by their own steepness
- [ORB-26](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-26/): a crazed web of coloured threads knotted to a cell grid
- [ORB-27](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-27/): a weather-radar mosaic, fronts of coloured pixels sweeping the ball
- [ORB-28](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-28/): nested binary grids shuttering on a tumbling bit-sphere
- [ORB-29](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-29/): an LED tile wall lighting up in flowing blobs, wrapped on the ball
- [ORB-30](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-30/): a meadow folding into itself toward a blue vanishing point
- [ORB-31](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-31/): raymarched shell, volumetric godrays
- [ORB-32](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-32/): a galaxy marched as gas and dust inside the ball
- [ORB-33](https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-33/): a thermal image, risograph-printed on the ball

## Machine-readable

- [Orb catalog (JSON)](https://react-native-shader-orbs.vercel.app/r/registry.json): every orb with its parameters, ranges, defaults, colors and moods.
- [Full documentation as one text file](https://react-native-shader-orbs.vercel.app/llms-full.txt): all docs and orb details, for loading into a context window.
- [Playground](https://react-native-shader-orbs.vercel.app/playground/): tune any orb live; supports ?orb=orb-05&state=speaking.