Orbs / ORB-32

ORB-32

a galaxy marched as gas and dust inside the ball

WebGPU isn't available in this browser

Installation

bash

npx expo install react-native-shader-orbs react-native-webgpu react-native-reanimated react-native-worklets

Usage

typescript

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

typescript

<ShaderOrb orb={orb32} size={280} state="idle" interactive />

Props

Component props

The props you'll use most. The ShaderOrb reference lists all of them.

Prop	Type	Default	Description
`state`	`"idle" \| "thinking" \| "speaking"`	`"idle"`	The mood. Eases the parameters toward that preset.
`size`	`number`	`280`	Width and height in points.
`params`	`Record<string, number>`		Parameter overrides by key, clamped to each range. See the shader params below.
`colors`	`Record<string, string>`		Hex colors by key. See the colors below.
`volumes`	`{ input?: number; output?: number }`		Levels from 0 to 1 that the shader reads as input and output loudness.
`interactive`	`boolean`	`false`	Tap pulses the orb; holding makes it swell.
`quality`	`"auto" \| "low" \| "medium" \| "high" \| number`	`"auto"`	Render scale. Lower is cheaper and softer.
`maxFps`	`number`	`60`	Frame cap.
`paused`	`boolean`	`false`	Stops drawing and keeps the last frame.
`onReady`	`() => void`		Called once the first frame is on screen.
`onError`	`(error: Error) => void`		Called if the orb can't start. Without it the error is logged once.

Shader params

Pass these through params. Values are clamped to the range shown. integrated parameters are phase clocks: the shader accumulates them over time, so the value acts as a rate.

Key	Label	Range	Step	Default
`spin`	Disc turn integrated	0 to 3	0.01	0.06
`churn`	Gas churn integrated	0 to 5	0.02	0.25
`beat`	Core beat integrated	0 to 12	0.05	0.8
`twinkle`	Twinkle rate integrated	0 to 12	0.05	1.2
`camDist`	Camera distance	1 to 50	0.3	7
`focal`	Lens	0.15 to 15	0.05	2.25
`envRadius`	Envelope radius	0.15 to 15	0.1	2.6
`tilt`	Tilt (0 edge-on)	0 to 1.5	0.01	0.85
`arms`	Arm count	1 to 6	1	2
`wind`	Arm winding	0 to 8	0.05	3.4
`ragged`	Arm fray	0 to 12	0.05	3
`armSharp`	Arm sharpness	0.3 to 8	0.05	2.2
`falloff`	Disc falloff	0.3 to 12	0.05	1.7
`thick`	Disc thickness	0.01 to 1	0.005	0.035
`bulge`	Core tightness	2 to 200	1	40
`core`	Core density	0 to 20	0.1	5
`turbScale`	Turbulence scale	0.5 to 30	0.1	9
`threshold`	Clumping	0 to 1	0.01	0.35
`density`	Gas density	0.1 to 40	0.1	14
`absorb`	Dust absorption	0 to 20	0.1	3.5
`stars`	Stars	0 to 10	0.05	1.2
`starDensity`	Star density	0 to 1	0.01	0.5
`starScale`	Star scale	5 to 200	1	48
`hueReach`	Hue reach	0.15 to 1.5	0.01	0.6
`pulse`	Beat depth	0 to 3	0.01	0.2
`breathe`	Disc breathing	0 to 2	0.01	0
`exposure`	Exposure	0.05 to 50	0.05	1.1
`contrast`	Contrast	0.15 to 6	0.05	1.15
`saturation`	Saturation	0 to 4	0.02	1.35
`alphaGain`	Alpha gain	0.05 to 15	0.1	2
`fill`	Night fill	0 to 1	0.01	0.85
`rim`	Rim light	0 to 3	0.015	0.35
`edge`	Edge sharpness	0 to 1	0.01	1
`edgeFade`	Halo falloff	0.1 to 0.985	0.015	0.98

Colors

Pass these through colors as hex strings.

Key	Label	Default
`tint`	Tint	`#ffffff`
`core`	Core	`#fff3d6`
`inner`	Inner arms	`#7fb4ff`
`outer`	Outer arms	`#c46bff`
`deep`	Night	`#04050f`
`rim`	Rim	`#8fb0ff`

Moods

This orb ships presets for idle, speaking, thinking. Choosing a state eases the parameters toward that preset; anything you pass in params still wins.

Credits

Based on original work by XorDev, via shadercn. The shader is licensed for non-commercial use with attribution; see Licensing and credits.

Ported to React Native by @msobkyy.

Want to change something? Open ORB-32 in the playground.