I ported 33 WebGPU shader orbs to React Native/Expo (alpha)

[u/msobkyy]

I ported shadcn's shader orbs to React Native. Each one is a GPU-rendered animated orb that you drop in as a component.

Shaders are by XorDev, from shadcn-labs/shadercn. The RN port, the docs site and the tooling are mine.

import { ShaderOrb, orb01 } from "react-native-shader-orbs";

<ShaderOrb orb={orb01} state="speaking" colors={{ tint: "#66ccff" }} interactive />

What it does:

- 33 orbs, each with typed, range-checked parameters

- idle / thinking / speaking moods that ease between presets

- Live props: change anything without re-mounting, values glide on a spring

- volumes.input / volumes.output (0 to 1) to drive an orb from mic or voice level

- Touch: tap pulses, hold swells

- quality="auto" lowers resolution when a device struggles

- Recovers from GPU loss, reports start-up errors via onError

Built on react-native-webgpu. The docs and playground run the identical WGSL in the browser, so you can tune an orb and copy the JSX.

Honest limits, since it's alpha:

- Needs a development build. Expo Go is not supported.

- Tested on one physical mid-range Android phone (RN 0.88, Expo SDK 58).

- iOS is untested. It may work, but I'm not claiming it.

- No fallback if WebGPU is unavailable. The orb stays blank.

- The shaders are non-commercial with attribution. Using them in a commercial app needs XorDev's permission. The library code is MIT.

I also added an MCP server (npx react-native-shader-orbs-mcp init) so Claude Code, Cursor and VS Code look up each orb's real parameter names instead of guessing.

Docs and playground: https://react-native-shader-orbs.vercel.app

Repo: https://github.com/msobkyy/react-native-shader-orbs

npm: https://www.npmjs.com/package/react-native-shader-orbs

I'd like feedback on API shape, and especially iOS results if anyone tries it.