shader orbs

Search

Jump to a page, a section or an orb.

Introduction

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.

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

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

What you get#

  • 33 orbs, each with its own set of typed, range-checked parameters and its own colors.
  • Three moods per orb (idle, thinking, speaking) that ease between parameter presets.
  • Volume inputs (input and output, 0 to 1) so an orb can follow audio or app activity.
  • Touch interaction: a tap pulses the orb, holding makes it swell, and it scales under your finger.
  • Adaptive quality: render resolution and frame rate trade off automatically to stay smooth.
  • Props update live, without re-mounting, so sliders and animations don't rebuild anything.

What you need to know first#

Development build required. The orbs render through a native WebGPU module that Expo Go doesn't include. You'll use a development build (npx expo run:android, or EAS Build).

  • It has been tested on Android, on one physical phone.
  • The shaders are by XorDev and are licensed for non-commercial use with attribution. The library code is MIT. Read Licensing and credits before shipping.
  • These are ray-marched shaders. They look expensive because they are; see Performance.

Where to go next#