# shader orbs: full documentation

> 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).

---

# 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](https://x.com/XorDev) and are licensed for **non-commercial use with attribution**. The
  library code is MIT. Read [Licensing and credits](/docs/licensing/) before shipping.
- These are ray-marched shaders. They look expensive because they are; see [Performance](/docs/performance/).

## Where to go next

- [Installation](/docs/installation/) to add the package and its peers.
- [Quick start](/docs/quick-start/) to render your first orb.
- [All 33 orbs](/docs/components/orbs/) to preview each one live in your browser.
- The [playground](/playground/) to tune any orb with sliders and copy the code.
- [ShaderOrb](/docs/shader-orb/) for the full prop reference.

---

# Installation



## Requirements

| Area | Requirement |
|---|---|
| Expo / React Native | A **development build**. Expo Go is not supported. |
| React Native | 0.81 or newer (the minimum `react-native-webgpu` supports). Tested on 0.88. |
| Expo SDK | Tested on SDK 58. |
| Platforms | **Android** tested on a physical device. |
| Peer packages | `react-native-webgpu`, `react-native-reanimated`, `react-native-worklets` |

## Install

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

`expo install` picks the versions that match your Expo SDK. Reanimated and Worklets are required by
`react-native-webgpu`, not by the orbs themselves.

> **Use `react-native-webgpu`, not `react-native-wgpu`.** The old name still exists on npm as a deprecated shim that
> re-exports the new package. Install the new one directly.

## Add the config plugin

`react-native-webgpu` ships an Expo config plugin. `npx expo install` normally adds it for you; check that
`app.json` (or `app.config.js`) contains it:

```json
{
  "expo": {
    "plugins": ["react-native-webgpu"]
  }
}
```

## Build a development build

Native code changed, so the app has to be rebuilt once:

```bash
npx expo run:android
```

or, with EAS Build:

```bash
eas build --profile development --platform android
```

Afterwards, JavaScript changes reload instantly through Metro as usual. You only rebuild when you add or upgrade a
native dependency.

> **Why not Expo Go?** Expo Go is a fixed binary with a fixed set of native modules. The WebGPU engine is native code
> that isn't in it, so there's nothing for the orbs to render with.

## Monorepos with pnpm

Metro can't follow pnpm's default symlinked `node_modules` layout reliably. If you see modules that can't be resolved,
add this to `.npmrc` and reinstall:

```ini
node-linker=hoisted
```

## Check that it works

Render the built-in test shader. It's a simple hand-written orb, so if it shows up your WebGPU setup is fine:

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

export default function Smoke() {
  return <ShaderOrb shader={testOrb} size={240} />;
}
```

If you see a swirling blue and pink circle, continue to the [Quick start](/docs/quick-start/). If not, see
[Troubleshooting](/docs/troubleshooting/).

---

# Quick start

## Render an orb

Every orb is exported by name: `orb01` through `orb33`.

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

export default function Screen() {
  return (
    <View style={{ flex: 1, backgroundColor: "#000", alignItems: "center", justifyContent: "center" }}>
      <ShaderOrb orb={orb01} size={300} />
    </View>
  );
}
```

The orb is transparent around the sphere, so it composites over whatever is behind it. A dark background shows the glow
best.

## Change how it looks

```tsx
<ShaderOrb
  orb={orb01}
  state="speaking"            // idle | thinking | speaking
  colors={{ tint: "#66ccff" }} // each orb lists its own color keys
  params={{ speed: 1.2 }}      // each orb lists its own parameters
/>
```

The keys differ per orb. Each orb's page under [Orbs](/docs/components/orbs/) lists its parameters, and the
[playground](/playground/) lets you try them with sliders and copies the code for you.

## Make it react

```tsx
<ShaderOrb orb={orb01} interactive />
```

Tap for a pulse; press and hold and it swells and speeds up. See [Touch interaction](/docs/interaction/).

## Drive it from your app

`volumes` takes numbers from 0 to 1. Use them to follow a microphone level, a loading state, or anything else:

```tsx
<ShaderOrb orb={orb01} volumes={{ input: micLevel, output: voiceLevel }} />
```

## Keep it smooth

```tsx
<ShaderOrb orb={orb01} quality="auto" maxFps={60} paused={!isFocused} />
```

`quality="auto"` is the default. See [Performance](/docs/performance/) for what each setting costs.

## Tips

- **Render one or two big orbs, not twenty.** Each orb is a full-screen-style shader at its own size. For lists, show a
  frozen preview; the [Performance](/docs/performance/) guide has the pattern.
- **Show a placeholder until `onReady`.** The first frame appears after the shader compiles, which can take a moment.
- **Pause when it's not visible.** Pass `paused` while a screen is in the background or scrolled away.

---

# Customizing an orb

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.

## Parameters

Each orb defines its own parameters. ORB-01, for example, has `speed`, `spin`, `turb`, `exposure` and about fifteen more.
You pass the ones you want to change:

```tsx
<ShaderOrb orb={orb01} params={{ speed: 1.5, turb: 0.6 }} />
```

- Anything you don't pass falls back to the current mood's preset, then to the orb's default.
- Values are **clamped** to the range the orb declares. Many shaders use a parameter as a divisor or a camera distance, so
  an out-of-range value would break the image rather than just look different.
- Every orb's keys, defaults and ranges are listed on its [page](/docs/components/orbs/), and are also on the definition itself:

```tsx
orb01.params.map((p) => `${p.key}: ${p.default} (${p.min} to ${p.max})`);
```

### Ranges are not linear

Some ranges span orders of magnitude (ORB-01's `exposure` runs from 1.5 to 1500, with a default of 60). If you build your
own sliders, don't pick random values across the whole range: moving `exposure` from 60 to 900 turns the orb nearly
black. Nudge relative to the current value instead, and leave camera and framing parameters (`camDist`, `focal`,
`envRadius` and similar) alone unless you mean to change the shape.

### Integrated parameters

Parameters marked **integrated** on an orb's page, such as `speed` and `spin`, are phase clocks. The shader doesn't read
the value directly; it accumulates it over time. That means changing `speed` changes how fast things move without making
the animation jump.

## Colors

```tsx
<ShaderOrb orb={orb01} colors={{ tint: "#ff6688" }} />
```

Colors are hex strings (`#rgb` or `#rrggbb`). An invalid value falls back to white. Each orb lists its color keys.

## Moods

```tsx
<ShaderOrb orb={orb01} state="thinking" />
```

`state` is one of `idle`, `thinking` or `speaking`. Choosing one eases every parameter (and the colors, for orbs that
define state colors) toward that mood's preset. Parameters you pass explicitly still win over the preset.

You can replace an orb's presets entirely:

```tsx
<ShaderOrb
  orb={orb01}
  state="speaking"
  statePresets={{ speaking: { turb: 1.2, speed: 2 } }}
  stateColors={{ speaking: { tint: "#88ff99" } }}
/>
```

## Volumes

```tsx
<ShaderOrb orb={orb01} volumes={{ input: 0.4, output: 0.8 }} />
```

Two numbers from 0 to 1 that the shaders read as "how loud is the input" and "how loud is the output". Most orbs use
`input` to stir the interior and `output` to brighten and speed the flow. They ease toward the value you give them, so you
can feed them a raw level every frame without it looking jittery.

If you don't pass volumes, each mood synthesizes its own gentle motion (speaking pulses, thinking drifts, idle rests).
`stateVolumes` lets you set per-mood levels:

```tsx
<ShaderOrb orb={orb01} state="speaking" stateVolumes={{ speaking: { input: 0.2, output: 0.9 } }} />
```

## Updating without re-rendering: `live`

Props flow through React, so changing them re-renders the component that owns them. For values that change many times per
second, such as a slider being dragged, pass a `live` function instead. The orb calls it every frame and reads from
whatever it returns:

```tsx
const store = useRef<OrbValues>({ state: "idle", params: {}, colors: {} }).current;

<ShaderOrb orb={orb01} live={() => store} />

// anywhere, no re-render:
store.params!.speed = 2;
```

The example app uses this for every slider; it kept drags smooth when the same updates through `setState` did not.

---

# Touch interaction

Add `interactive` and the orb responds to touch. It's off by default.

```tsx
<ShaderOrb orb={orb01} interactive />
```

## What it does

| Gesture | Response |
|---|---|
| **Tap** (press and release in under 250 ms) | A pulse: turbulence and flow spike, then fade over about 0.8 seconds. |
| **Hold** | The orb swells and speeds up over about 0.45 seconds. An orb in `idle` takes on its `speaking` look while held. |
| **Release** | It eases back over about 0.7 seconds. |
| **Any press** | The whole orb scales up slightly and springs back with a small bounce when you let go. |

The scale animation runs on the native animation driver, so it doesn't compete with the render loop.

## Props

| Prop | Default | |
|---|---|---|
| `interactive` | `false` | Turns touch handling on. |
| `pressScale` | `1.08` | How far the orb grows while pressed, as a multiplier. `1` disables the scale. |

```tsx
<ShaderOrb orb={orb01} interactive pressScale={1.12} />
```

## Inside scroll views and pagers

The orb listens with raw touch events rather than claiming the gesture, so a parent `ScrollView` or `FlatList` can still
take over. If you start a swipe on the orb and the pager scrolls, the press is treated as cancelled: no pulse fires and
the orb settles back.

## Build your own reaction

`interactive` changes what the orb does on touch. To react to something else, such as a button press or an audio level,
drive the volumes yourself:

```tsx
<ShaderOrb orb={orb01} volumes={{ output: isSpeaking ? 0.9 : undefined }} />
```

Leaving a volume `undefined` lets the mood's own motion run.

---

# Performance

These orbs are ray-marched: for every pixel, the shader steps through a volume dozens of times. Cost grows with the
number of pixels, so the biggest levers are **how many pixels you draw** and **how often**.

> **What was measured.** On one mid-range Android phone, ORB-01 held about 50 to 58 fps at a 0.75x render scale, and
> auto quality settled around 0.6x for harder parameter settings. Other orbs and other phones will differ. Use the
> `onStats` callback to see what yours does.

## Quality

`quality` sets the render scale: the orb is drawn at `size * scale` pixels per side and upscaled to `size`.

| Value | Scale |
|---|---|
| `"low"` | 0.5 |
| `"medium"` | 0.75 |
| `"high"` | 1 |
| a number | that scale, clamped to 0.2 to 1 |
| `"auto"` (default) | starts at 0.75 and adapts, see below |

```tsx
<ShaderOrb orb={orb01} quality="medium" />
```

Changing the scale re-creates the canvas, so avoid animating it. Pick a value, or use `"auto"`.

### How auto works

Once a second the renderer reports the frame rate it actually achieved. In auto mode:

1. If two seconds in a row come in under **80%** of `maxFps`, the scale drops by **0.15** (not below **0.35**).
2. The scale that just failed becomes a ceiling, so it never climbs back to it.
3. If ten seconds in a row reach **95%** of `maxFps`, it climbs by **0.1**, up to that ceiling.
4. After every change, the next three readings are ignored while the new canvas warms up.

## Frame cap

`maxFps` defaults to **60**. Set it to **30** to roughly halve GPU load and save battery, which suits an ambient orb:

```tsx
<ShaderOrb orb={orb01} maxFps={30} />
```

On a 120 Hz display the cap still holds you at 60 by skipping alternate frames.

## Size

Smaller orbs are cheaper: halving the width quarters the pixels. If an orb is decoration, give it the smallest `size`
that looks right.

## Pause what you can't see

```tsx
<ShaderOrb orb={orb01} paused={!isFocused} />
```

`paused` stops drawing and leaves the last frame on screen. The component also stops by itself when the app goes to the
background and resumes when it returns.

Only mount orbs that are on screen. Mounting is cheap (see below), but a mounted, running orb costs GPU time every frame.

## Lists and galleries: freeze a frame

For a grid of previews, let each orb draw for a moment and then pause, so a preview costs nothing afterwards:

```tsx
function Thumb({ orb }: { orb: OrbDefinition }) {
  const [frozen, setFrozen] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setFrozen(true), 1600);
    return () => clearTimeout(t);
  }, []);
  return <ShaderOrb orb={orb} size={60} quality="low" maxFps={30} paused={frozen} />;
}
```

Use a virtualized list so only visible rows mount. The example app's sidebar works this way.

## What's already optimized

- **One GPU device** is shared by every orb, and **compiled pipelines are cached** per shader, so mounting a second orb
  doesn't request a device or recompile.
- Pipelines are created **asynchronously**, so compiling doesn't block the JS thread.
- The per-frame drive code **avoids most allocation**: uniform offsets are resolved once up front instead of building
  key strings every frame, and the loops don't create closures.
- Touch scaling uses the **native animation driver**.

## Measure it

```tsx
<ShaderOrb
  orb={orb01}
  onStats={({ fps, scale }) => console.log(fps.toFixed(0), "fps at", scale.toFixed(2), "x")}
/>
```

`onStats` fires about once a second. Don't store it in state at that rate if the owning component is expensive to render;
the example app throttles its badge for that reason.

If a screen with sliders feels laggy, move the slider values into a `live` store. See
[Customizing an orb](/docs/customizing/).

---

# Troubleshooting

## "Cannot find native module" (WebGPU or similar)

You're running without the native code. Two common causes:

- **You're in Expo Go.** It can't load the WebGPU module. Use a [development build](/docs/installation/).
- **You installed a native dependency but didn't rebuild.** Adding or upgrading `react-native-webgpu`, Reanimated or
  Worklets needs `npx expo run:android` (or a new EAS build) once.

## The orb area is blank for a moment

The first frame appears after the shader compiles. That's normally well under a second, but it isn't instant. Show your own
placeholder and hide it from `onReady`:

```tsx
const [ready, setReady] = useState(false);
// ...
{!ready && <Placeholder />}
<ShaderOrb orb={orb01} onReady={() => setReady(true)} />
```

Later orbs are faster to appear: the GPU device and compiled pipelines are shared and cached.

## The orb stays blank

Rendering needs a WebGPU adapter from `react-native-webgpu`. If the device can't provide one, nothing is drawn, and the
library doesn't yet include a fallback. Check the logs for `WebGPU adapter unavailable`, and try another device.

## The orb is nearly black, or the shape looks broken

A parameter is outside the range the shader was written for. Several parameters are divisors, exposures or camera
distances, so a few of them change the image a lot. Values you pass are clamped to each parameter's declared range, but
the ranges can still be wide: ORB-01's `exposure` accepts 1.5 to 1500.

- Drop the `params` you passed and add them back one at a time.
- Don't pick values at random across the whole range. Move relative to the default.
- Leave framing parameters (`camDist`, `focal`, `envRadius`, `edge`) at their defaults unless you want a different shape.

## It's slow or the frame rate drops

- Use `quality="auto"` (the default), or set `quality="medium"`.
- Cap the frame rate: `maxFps={30}`.
- Make the orb smaller.
- Pause orbs that aren't visible, and mount only the ones on screen.

See [Performance](/docs/performance/). Heavier parameter settings (high `speed`, `spin` or `turb` on some orbs) cost more.

## Sliders feel laggy

Updating state in a parent on every drag step re-renders everything beneath it, on the same thread that drives the
orb. Put the values in a `live` store and mutate it instead. See [Customizing an orb](/docs/customizing/).

## A vertical swipe over a slider moves the slider instead of scrolling

In your own UI: don't let a control claim the gesture on contact. Claim it only after the finger moves mostly sideways,
and let taps through as plain touch events. The example app's slider does this.

## Metro can't resolve modules in a pnpm monorepo

Use a hoisted install: add `node-linker=hoisted` to `.npmrc` and reinstall. See [Installation](/docs/installation/).

## `react-native-wgpu` prints a deprecation warning

That package was renamed. Remove it and install `react-native-webgpu`.

## Copying text in the example app opens a share sheet

The example app's Copy button uses the clipboard when `expo-clipboard`'s native module is in the build, and the system
share sheet otherwise. Rebuild the development build to get true clipboard copy.

## Does it work on iOS?

It hasn't been tested. `react-native-webgpu` supports iOS, so it may well work, but nothing here claims it does.

---

# ShaderOrb

The component that renders an orb.

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

<ShaderOrb orb={orb01} size={300} state="idle" interactive />
```

## What to render

| Prop | Type | Default | |
|---|---|---|---|
| `orb` | `OrbDefinition` | | An orb: `orb01` to `orb33`. |
| `shader` | `OrbShader` | | A raw shader, for custom or test shaders. Used only when `orb` isn't set. One of `orb` or `shader` is required. |
| `size` | `number` | `280` | Width and height in points. |
| `style` | `StyleProp<ViewStyle>` | | Style for the wrapping view. |

## Appearance

| Prop | Type | Default | |
|---|---|---|---|
| `state` | `"idle" \| "thinking" \| "speaking"` | `"idle"` | The mood. Eases the parameters toward that preset. |
| `params` | `Record<string, number>` | | Parameter overrides by key. Clamped to each parameter's range. Win over the mood's preset. |
| `colors` | `Record<string, string>` | | Hex colors by key. Win over the mood's colors. |
| `volumes` | `{ input?: number; output?: number }` | | Levels from 0 to 1. Win over the synthesized and per-mood levels. |
| `statePresets` | `Partial<Record<OrbState, Record<string, number>>>` | | Replaces the orb's presets for the moods you list. |
| `stateColors` | `Partial<Record<OrbState, Record<string, string>>>` | | Replaces the orb's per-mood colors. |
| `stateVolumes` | `Partial<Record<OrbState, { input?: number; output?: number }>>` | | Per-mood volume levels. |
| `live` | `() => OrbValues` | | Read every frame instead of the props above. See [Customizing](/docs/customizing/). |

## Interaction

| Prop | Type | Default | |
|---|---|---|---|
| `interactive` | `boolean` | `false` | Tap pulses the orb; holding makes it swell. |
| `pressScale` | `number` | `1.08` | Growth while pressed. `1` disables it. Needs `interactive`. |

See [Touch interaction](/docs/interaction/).

## Performance

| Prop | Type | Default | |
|---|---|---|---|
| `quality` | `"auto" \| "low" \| "medium" \| "high" \| number` | `"auto"` | Render scale. See [Performance](/docs/performance/). |
| `maxFps` | `number` | `60` | Frame cap. Can be changed while mounted. |
| `paused` | `boolean` | `false` | Stops drawing and keeps the last frame. |

## Callbacks

| Prop | Type | |
|---|---|---|
| `onReady` | `() => void` | Once, after the first frame is on screen. Use it to hide a placeholder. |
| `onError` | `(error: Error) => void` | If the orb can't start (no WebGPU adapter, a shader that fails to compile). It stays blank. Without it, the error is logged once with `console.warn`. |
| `onStats` | `({ fps, scale }) => void` | About once a second: the achieved frame rate and the current render scale. |

## Behavior notes

- **Props update live.** Changing `state`, `params`, `colors` or `volumes` doesn't recreate the orb or its GPU resources.
  Values ease toward the new target with a spring.
- **Changing `orb`, `shader`, `interactive` or the render scale does.** Those rebuild the shader or the canvas.
- **Lifecycle.** The orb stops when the app is backgrounded and resumes when it returns, unless `paused`.
- **Sizing.** The canvas is drawn at `size * scale` and scaled up to `size`, so a lower quality looks softer, not smaller.
- **Transparency.** Pixels outside the sphere are transparent.
- **Errors.** Rendering needs a WebGPU adapter. If the device can't provide one the orb stays blank.

## Example

```tsx
function Assistant({ listening, level }: { listening: boolean; level: number }) {
  const [ready, setReady] = useState(false);
  return (
    <View style={{ width: 280, height: 280 }}>
      {!ready && <Placeholder />}
      <ShaderOrb
        orb={orb01}
        state={listening ? "speaking" : "idle"}
        volumes={{ input: level }}
        colors={{ tint: "#66ccff" }}
        interactive
        onReady={() => setReady(true)}
      />
    </View>
  );
}
```

---

# Types and exports

Everything is exported from `react-native-shader-orbs`.

## Orbs

```ts
import { orb01, orb02, /* ... */ orb33, orbs } from "react-native-shader-orbs";
```

- `orb01` to `orb33` are `OrbDefinition` objects.
- `orbs` is an array of all of them, in order. Handy for galleries.
- `testOrb` is a small hand-written shader, useful as a smoke test.

## OrbDefinition

What an orb is. You rarely build one by hand: they're generated. See [How it works](/docs/how-it-works/).

```ts
interface OrbDefinition {
  slug: string;           // "orb-01"
  title: string;          // "ORB-01"
  note: string;           // one-line description
  entryPoint: string;     // WGSL fragment entry
  uniformSize: number;    // bytes
  offsets: Record<string, { offset: number; size: number }>; // in floats
  params: OrbParam[];
  colors: OrbColor[];
  statePresets?: Partial<Record<OrbState, Record<string, number>>>;
  stateColors?: Partial<Record<OrbState, Record<string, string>>>;
  wgsl: string;
}

interface OrbParam {
  key: string;
  label: string;
  default: number;
  min: number;
  max: number;
  step: number;
  integrate: boolean;     // a phase clock: the shader accumulates it over time
}

interface OrbColor {
  key: string;
  label: string;
  default: string;        // hex
}
```

## OrbState

```ts
type OrbState = "idle" | "thinking" | "speaking";
const ORB_STATES: readonly ["idle", "thinking", "speaking"];
```

## OrbValues

The shape `live` returns, and the value props of `ShaderOrb`:

```ts
interface OrbValues {
  state?: OrbState;
  params?: Record<string, number>;
  colors?: Record<string, string>;
  statePresets?: Partial<Record<OrbState, Record<string, number>>>;
  stateColors?: Partial<Record<OrbState, Record<string, string>>>;
  stateVolumes?: Partial<Record<OrbState, { input?: number; output?: number }>>;
  volumes?: { input?: number; output?: number };
}
```

## OrbQuality

```ts
type OrbQuality = "auto" | "low" | "medium" | "high" | number;
```

## Lower-level functions

For custom renderers. Most apps never need these.

### createOrbShader

```ts
createOrbShader(def: OrbDefinition, read: () => OrbValues, touch?: OrbTouch): OrbShader
```

Binds a definition to a function that returns the current values, and returns an `OrbShader`: the WGSL plus a `write`
function that fills the uniform buffer for a frame. It holds all the easing, mood, volume and touch logic and has no
React Native dependency, which is why the docs site runs the same code in the browser.

### OrbShader

```ts
interface OrbShader {
  wgsl: string;
  entryPoint: string;
  uniformSize: number;
  write: (f32: Float32Array, time: number, width: number, height: number) => void;
}
```

### createOrbRenderer

```ts
createOrbRenderer(
  context: RNCanvasContext,
  shader: OrbShader,
  size: () => { width: number; height: number },
  options?: { maxFps?: number; onFps?: (fps: number) => void; onFirstFrame?: () => void }
): Promise<{ start(): void; stop(): void; setMaxFps(fps: number): void; destroy(): void }>
```

Draws an `OrbShader` into a `react-native-webgpu` canvas context with a fullscreen triangle. This is what `ShaderOrb`
uses.

---

# MCP server and agent skills

Everything an AI coding assistant needs to use `react-native-shader-orbs` correctly: an [MCP](https://modelcontextprotocol.io) server, a
skill, and instruction files. One command sets them all up in your project.

```bash
npx react-native-shader-orbs-mcp init
```

It writes MCP config for Claude Code, Cursor and VS Code, a Claude Code skill, an `AGENTS.md` block (read by Codex, Cursor,
Copilot, Windsurf and others), your `CLAUDE.md` if you have one, and a Cursor rule. It is safe to re-run: configs are
merged, never replaced, and the instructions block updates in place. Add `--dry-run` to see what it would change,
`--only=mcp,skill,rules` to pick parts, and `--force` to replace an entry that differs.

## Why

Assistants guess at parameter names. `exposure` exists on some orbs and not others, and its range runs from 1.5 to 1500, so a
confident guess gives you a black orb. With these files the assistant looks keys up instead of guessing, checks the
license, and writes code with keys that exist and values that are in range.

## What ships where

| Where | What | For |
|---|---|---|
| `node_modules/react-native-shader-orbs/agent/INSTRUCTIONS.md` | How to use the library correctly | any agent that reads files |
| `node_modules/react-native-shader-orbs/agent/catalog.json` | Every orb: parameters, ranges, defaults, colors, presets | any agent, offline |
| `node_modules/react-native-shader-orbs/agent/skills/shader-orbs/SKILL.md` | The same guidance as an agent skill | Claude Code and other skill-aware agents |
| `react-native-shader-orbs-mcp` (npm) | The MCP server | MCP clients |
| [`/llms.txt`](/llms.txt), [`/llms-full.txt`](/llms-full.txt) | Docs index and full text | agents browsing the web |

All of it is generated from the orb sources, so it can't drift from the code.

## Tools

| Tool | What it does |
|---|---|
| `get_guide` | The full usage instructions. Read before writing orb code. |
| `list_orbs` | Lists orbs, optionally filtered by a search word that matches the title, description, or parameter names. |
| `get_orb` | Everything about one orb: parameters with ranges and defaults, colors, moods, per-mood presets, and a usage snippet. |
| `find_by_parameter` | Finds the orbs that have a parameter matching a name, such as `exposure` or `lattice`, with its range on each. |
| `build_snippet` | Writes a `<ShaderOrb />` snippet from a state, params, colors and volumes. It rejects unknown keys and flags out-of-range values instead of passing them through. |
| `get_install` | The install steps, the requirements, and the licensing caveat. |

The guide is also exposed as the resource `shader-orbs://guide`.

## Set it up by hand

The server runs locally over stdio and needs no network.

```bash
# Claude Code
claude mcp add shader-orbs -- npx -y react-native-shader-orbs-mcp
```

```json
{
  "mcpServers": {
    "shader-orbs": { "command": "npx", "args": ["-y", "react-native-shader-orbs-mcp"] }
  }
}
```

That block works in Claude Desktop, Cursor (`.cursor/mcp.json`) and Claude Code (`.mcp.json`). VS Code uses `"servers"` with
`"type": "stdio"` in `.vscode/mcp.json`.

## Try it

Once connected, ask the assistant something it would otherwise guess at:

- "Which orbs have an exposure parameter, and what range does it take?"
- "Make ORB-12 look like it's thinking, tinted green, and give me the code."
- "I want a slow, calm orb with low turbulence. Which one fits?"

## What it won't do

- It doesn't render anything. It describes orbs and writes code.
- It reads the catalog shipped with the version you installed. Update `react-native-shader-orbs-mcp` when the library changes.
- It carries the same licence caveat as the shaders: they are non-commercial unless you have XorDev's permission.
  `get_install` says so.

---

# 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.

> **This is not a shadcn registry.** shadcn registries copy component source into your project. These orbs ship inside the
> `react-native-shader-orbs` npm package and you import them, so there is nothing to install from here. The catalog describes them.

## Endpoints

| URL | What it is |
|---|---|
| `/r/registry.json` | The catalog: every orb with its parameters, colors and moods. |
| `/r/orb-01.json` | One orb, including its per-mood parameter presets. Also `orb-02` to `orb-33`. |
| `/llms.txt` | A short index in the [llms.txt](https://llmstxt.org) format, for AI assistants. |
| `/llms-full.txt` | All the docs and every orb's parameters, as one text file. |

The shader source (WGSL) is deliberately left out: it's large, and nothing that reads a catalog needs it.

## The catalog

```json
{
  "name": "react-native-shader-orbs",
  "status": "pre-release",
  "install": "npx expo install react-native-shader-orbs react-native-webgpu react-native-reanimated react-native-worklets",
  "requirements": ["A development build. Expo Go is not supported (native WebGPU module)."],
  "license": {
    "library": "MIT",
    "shaders": "Non-commercial use only, with attribution to XorDev. Commercial use needs XorDev's permission.",
    "author": "XorDev (https://x.com/XorDev)"
  },
  "orbs": [
    {
      "slug": "orb-01",
      "title": "ORB-01",
      "description": "cut-glass orb with a dispersive, turbulent interior",
      "export": "orb01",
      "docs": "/docs/components/orbs/orb-01/",
      "json": "/r/orb-01.json",
      "playground": "/playground/?orb=orb-01",
      "params": [
        { "key": "speed", "label": "Anim speed", "default": 0.5, "min": 0.015, "max": 10, "step": 0.05, "integrated": true }
      ],
      "colors": [{ "key": "tint", "label": "Tint", "default": "#ffffff" }],
      "moods": ["idle", "speaking", "thinking"],
      "usage": "import { ShaderOrb, orb01 } from \"react-native-shader-orbs\";\n\n<ShaderOrb orb={orb01} size={280} interactive />"
    }
  ]
}
```

A per-orb file has the same shape plus `statePresets` (and `stateColors`, for orbs that define them): the parameter values
each mood eases toward.

## Fields

- **`params`**: what you can pass through `params`. Values outside `min` and `max` are clamped by the component.
  `integrated` marks a phase clock, where the value acts as a rate.
- **`colors`**: what you can pass through `colors`, as hex strings.
- **`moods`**: the values `state` accepts for this orb.
- **`usage`**: a minimal, correct snippet.

## Absolute URLs

The links in the files are relative to the site root until the site is given a public address. Set `url` in
`lib/site.ts` and every link in the catalog, `llms.txt` and `llms-full.txt` becomes absolute.

## Using it

```ts
const res = await fetch("/r/registry.json");
const { orbs } = await res.json();

// Which orbs have an "exposure" parameter?
orbs.filter((o) => o.params.some((p) => p.key === "exposure")).map((o) => o.title);
```

The [MCP server](/docs/mcp/) is built on this same data.

---

# How it works

The shaders come from [shadercn](https://github.com/shadcn-labs/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.

## 1. Compile the shaders once

shadercn writes each orb in **TypeGPU**: TypeScript functions with a `"use gpu"` directive that a build plugin turns into
WGSL. TypeGPU needs that plugin at build time, and it expects to run in a browser.

Rather than ask every app to set up the plugin, a codegen step does it once, in this repository:

```bash
cd packages/codegen
node generate.mjs <path-to-shadercn-clone> <out-dir>
```

For each orb it:

1. bundles the orb's `gpu.ts` and `meta.ts` with the TypeGPU plugin,
2. runs the bundle to read the resolved **WGSL string** and the parameter metadata,
3. computes the **uniform buffer layout** (byte offsets, with WGSL's alignment rules) from the shader's `params` struct,
4. writes `orb-NN.ts`: a plain data object with the WGSL, the offsets, the parameters, colors and mood presets.

Those generated files are what you import. They contain no TypeGPU and need no plugin.

## 2. Render with raw WebGPU

At runtime, `react-native-webgpu` provides a `Canvas` and the standard WebGPU API. The renderer:

- requests **one GPU device**, shared by every orb in the app,
- builds a **render pipeline** per shader (cached, created asynchronously),
- draws a single **fullscreen triangle**; the fragment shader does all the work,
- uploads **one uniform buffer** per frame,
- calls `context.present()` after submitting.

shadercn uses vgpu for this part on the web. vgpu documents browser and Node runtimes only, so this package uses the
WebGPU API directly instead, in a couple of hundred lines.

## 3. Drive it from props

Each shader reads a uniform struct: time, an animation clock, input and output volume, the resolution, one float per
parameter (`p_speed`, `p_turb`, ...) and one `vec3` per color (`c_tint`).

`createOrbShader` fills that struct every frame:

- **Springs** ease every parameter and color toward its target, so a prop change glides.
- **Moods** select a preset as the target for each parameter.
- **Volumes** ease toward their targets, or toward a gentle synthesized motion per mood.
- A shared **flow clock** speeds up when output volume is high, and **integrated** parameters accumulate against it.
- **Touch** adds a hold level and a pulse on top.

This code is plain TypeScript with no React Native imports. The docs site runs the same file in the browser, so the
orbs on these pages behave exactly like the app.

## 4. Draw small, scale up

The cost of a ray-marched shader is the pixel count. `ShaderOrb` draws into a canvas that is `size * scale` pixels per side
and upscales it with a transform. [Auto quality](/docs/performance/) adjusts that scale from the measured frame rate.

## Repository layout

| Path | What's in it |
|---|---|
| `packages/react-native-shader-orbs` | The library: `ShaderOrb`, the renderer, the drive logic, generated orbs. |
| `packages/codegen` | The TypeGPU-to-WGSL generator. |
| `apps/example` | The Expo showcase app. |
| `apps/web` | This site. |

---

# Licensing and credits

> **Read this before you ship.** The library code is MIT, but the shaders are not free for commercial use.

## The shaders

All 33 orb shaders are original work by **[XorDev](https://x.com/XorDev)**, used with permission through shadercn. The
header of each shader carries this notice, and it has to stay with the file:

> Shader by XorDev (https://x.com/XorDev), ported for Orbkit with the author's permission. Non-commercial use only, with
> attribution to XorDev; keep this notice with the file. shadercn's runtime (renderer.ts) is MIT-licensed.

In practice that means:

- **Non-commercial use** is allowed, with **attribution to XorDev**.
- **Commercial use is not covered.** If you want to use these shaders in a paid or commercial product, ask XorDev.
- Keep the notice in the generated files. Don't strip it when bundling or minifying source you distribute.

## The library

The runtime, the component, the drive logic and the codegen in this repository are released under the **MIT license**.
The MIT license applies to that code. It does not change the terms attached to the shaders above, so a project that uses
the orbs is bound by the shader terms even though the package around them is MIT.

## shadercn

The shaders and their parameter definitions come from
[shadercn](https://github.com/shadcn-labs/shadercn) by Shadcn Labs (MIT, copyright 2026). This project is a derivative
work: it re-targets those shaders to React Native. It is **not affiliated with or endorsed by** shadercn, Shadcn Labs or
XorDev.

shadercn's own credits file lists XorDev as the author of every orb: "All 33 orb shaders are based on original work by
@XorDev. Used with permission."

## The React Native port

The React Native port (the component, the renderer, the drive logic, the codegen, the docs site and the MCP server) is by
**[@msobkyy](https://x.com/msobkyy)**. That is credit for the port, not a change to the shader terms above: the shaders
remain XorDev's work.

## Other software

| Package | License | Used for |
|---|---|---|
| `react-native-webgpu` | MIT | WebGPU on React Native. |
| `typegpu` and `unplugin-typegpu` | See their repositories | Compiling the shaders (build time only). |

If you redistribute the package, include `NOTICE.md` from the package folder.

## Using these in your own app

A reasonable attribution line, for an app that uses them non-commercially:

```text
Orb shaders by XorDev (https://x.com/XorDev), via shadercn and react-native-shader-orbs.
```

This page is a plain-language summary, not legal advice. When in doubt, read the notices in the source files and ask the
author.

---

# Changelog

Everything that has been added so far, grouped by area.

> `react-native-shader-orbs` is published as an **alpha**, so expect the API to change.

## 0.1.0-alpha.4

The npm page now shows the banner and orb gallery, and the repository gained a contributing guide, security policy and code of conduct. No change to the orbs or the component.

## 0.1.0-alpha.3

Reliability and a little speed.

- Orbs rebuild themselves on a fresh GPU device after it is lost (a driver reset, or the app being backgrounded), instead of staying blank.
- New `onError` prop. If the orb can't start (no WebGPU adapter, a shader that fails to compile) it is reported there, or logged once with `console.warn`, instead of raising an unhandled promise rejection.
- Color strings are parsed once, not every frame.

## 0.1.0-alpha.2

Package metadata and agent files. No change to the orbs or the component.

- npm page: a rewritten README, 17 keywords, and links to the docs and the repository.
- AI agents: `agent/INSTRUCTIONS.md`, a per-orb `agent/catalog.json` and a Claude Code skill ship inside the package. `npx react-native-shader-orbs-mcp init` sets up MCP config, the skill and an `AGENTS.md` block.

## 0.1.0-alpha.1

README and keywords only. Superseded by alpha.2, which adds the docs and repository links.

## 0.1.0-alpha.0

The first release, published to npm on 2026-11-01 under both the `latest` and `next` tags.

### Docs site

- Light and dark themes, a ⌘K search over pages, headings and orbs (including by parameter name), and a theme toggle.
- A single [playground](/playground/) with every control, and a preview-only page for each of the 33 orbs.
- A machine-readable [registry](/docs/registry/), [llms.txt](/llms.txt) and [llms-full.txt](/llms-full.txt).
- An [MCP server](/docs/mcp/) for AI assistants, built on the registry.
- Gallery previews that wake up on hover.

### Touch and interaction

- `interactive` prop: a tap pulses the orb and holding makes it swell and speed up.
- `pressScale` prop, with a spring that scales the orb under the finger, running on the native animation driver.

### Performance

- `quality` (`"auto"`, `"low"`, `"medium"`, `"high"`, or a number) and `maxFps`.
- Auto quality steps the render scale down when the frame rate drops, and climbs back cautiously.
- One shared GPU device and cached pipelines across all orbs; pipelines are created asynchronously.
- The `live` prop, so values that change many times a second (sliders) reach the orb without re-rendering React.
- A per-frame drive path that avoids most allocation.

### Core

- 33 orbs, ported from [shadercn](https://github.com/shadcn-labs/shadercn): shaders resolved to WGSL once by a codegen
  step, then rendered with raw WebGPU through `react-native-webgpu`.
- `ShaderOrb` with `state`, `params`, `colors`, `volumes`, per-mood presets, and spring easing on every value.
- `onReady` and `onStats` callbacks.
- Tested on one Android phone.
- Expo Go is not supported; a development build is required.

### Known gaps

- On a device where WebGPU can't get an adapter, the orb stays blank. There is no fallback yet.
- It is an alpha: expect the API to change.
- The shaders are licensed for non-commercial use only. See [Licensing and credits](/docs/licensing/).

---

# Orb reference

### ORB-01

cut-glass orb with a dispersive, turbulent interior

Import: `import { orb01 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-01/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `spin` (Spin rate): 0 to 5, default 0.25, step 0.03, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `tilt` (Field tilt): 0 to 4, default 0.5, step 0.02
- `turb` (Turbulence): 0 to 5, default 0.3, step 0.03
- `sheets` (Sheet density): 1 to 60, default 7, step 0.5
- `disperse` (Dispersion): 0 to 5, default 1, step 0.03
- `stria` (Striation depth): 0 to 10, default 1, step 0.05
- `envRadius` (Envelope radius): 0.15 to 15, default 2.6, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 1, step 0.01
- `fill` (Body fill): 0 to 100, default 1.5, step 0.3
- `stepClamp` (Step clamp): 0.3 to 300, default 20, step 1.5
- `scatter` (Diffusion): 0 to 0.5, default 0.02, step 0.003
- `exposure` (Exposure): 1.5 to 1500, default 60, step 10
- `contrast` (Contrast): 0.15 to 15, default 1, step 0.1
- `saturation` (Saturation): 0 to 4, default 1, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-02

ornate scrollwork on a rolling dome

Import: `import { orb02 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-02/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.06, step 0.015
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `swell` (Input swell): 0 to 1, default 0.06, step 0.01
- `zoom` (Pattern zoom): 0.15 to 40, default 4.4, step 0.2
- `bulge` (Sphere bulge): 0 to 10, default 0.35, step 0.05
- `warpFreq` (Warp frequency): 0.05 to 10, default 1.5, step 0.05
- `hueShift` (Hue shift): 0 to 6.283, default 0, step 0.05
- `coreClamp` (Flare size): 0.003 to 3, default 0.12, step 0.015
- `falloff` (Fill): 0.05 to 4, default 1, step 0.05
- `gain` (Exposure): 0.015 to 10, default 0.55, step 0.05
- `rim` (Rim light): 0 to 3, default 0.12, step 0.015
- `rimPow` (Rim tightness): 0.15 to 15, default 2.2, step 0.1
- `alphaGain` (Alpha gain): 0.05 to 15, default 2.4, step 0.1
- `baseVis` (Base visibility): 0 to 1.5, default 0.08, step 0.01

### ORB-03

a turbulent belt of light girdling the ball, contoured in rainbow

Import: `import { orb03 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-03/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.6, step 0.05, integrated phase clock
- `wander` (Belt tilt drift): 0 to 5, default 0.3, step 0.02, integrated phase clock
- `feedback` (Tilt feedback): 0 to 40, default 1.5, step 0.1
- `camDist` (Camera distance): 1 to 50, default 5, step 0.3
- `focal` (Lens): 0.15 to 15, default 1.05, step 0.05
- `shellR` (Shell radius): 0.2 to 20, default 3, step 0.1
- `shellW` (Shell weight): 0.005 to 1, default 0.12, step 0.005
- `plane` (Belt tightness): 0 to 1, default 0.15, step 0.005
- `turb` (Warp): 0 to 4, default 0.55, step 0.02
- `width` (Belt width): 0.0005 to 0.4, default 0.004, step 0.0005
- `pulse` (Belt breathing): 0 to 1, default 0, step 0.01
- `surge` (Belt surge): 0 to 1, default 0, step 0.01
- `hue` (Contour hue): 0 to 60, default 25, step 0.1
- `spread` (Colour spread): 0 to 3, default 1, step 0.02
- `envRadius` (Envelope radius): 0.15 to 20, default 3.3, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 0.92, step 0.01
- `fill` (Body fill): 0 to 40, default 0.1, step 0.05
- `stepClamp` (Step clamp): 5 to 20000, default 1500, step 25
- `scatter` (Diffusion): 0 to 0.1, default 0.0006, step 0.0002
- `exposure` (Exposure): 20 to 100000, default 1500, step 50
- `contrast` (Contrast): 0.15 to 15, default 1.2, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.25, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-04

a hollow shell of light, faceted by a voxel lattice

Import: `import { orb04 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-04/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.6, step 0.05, integrated phase clock
- `camDist` (Camera distance): 1 to 60, default 9, step 0.3
- `focal` (Lens): 0.15 to 15, default 1.35, step 0.05
- `shellR` (Shell radius): 0.3 to 20, default 5, step 0.1
- `pitch` (Facet size): 0.005 to 1.5, default 0.3, step 0.005
- `turb` (Displacement): 0 to 5, default 0.45, step 0.02
- `slack` (Trace slack): 0.01 to 0.9, default 0.1, step 0.005
- `width` (Surface width): 0.0005 to 0.3, default 0.003, step 0.0005
- `hueGain` (Position hue): 0 to 6, default 1, step 0.02
- `floorLevel` (White floor): 0 to 4, default 0.8, step 0.02
- `envScale` (Silhouette margin): 1 to 2, default 1.16, step 0.01
- `exposure` (Exposure): 20 to 40000, default 3000, step 20
- `contrast` (Contrast): 0.15 to 15, default 1.3, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.3, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-05

rainbow rings travelling through a lattice of lenses

Import: `import { orb05 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-05/

Parameters (pass through `params`; values are clamped to the range):

- `ring` (Ring speed): 0 to 8, default 0.9, step 0.03, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.05, step 0.015, integrated phase clock
- `slide` (Lattice slide): 0 to 4, default 0.12, step 0.02, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Lattice scale): 0.3 to 20, default 5, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.3, step 0.02
- `lens` (Lens strength): 0 to 4, default 1, step 0.02
- `poleSoft` (Wall softness): 0.0008 to 0.5, default 0.02, step 0.0008
- `freq` (Ring frequency): 0.05 to 8, default 1, step 0.05
- `spread` (Colour split): 0 to 4, default 1, step 0.02
- `gain` (Brightness): 0.05 to 4, default 1.1, step 0.02
- `contrast` (Contrast): 0.15 to 6, default 1, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.15, step 0.02
- `floorLevel` (Body fill): 0 to 2, default 0.12, step 0.01
- `light` (Key light): 0 to 3, default 0.4, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.45, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff
- `body` (Body): default #141a30
- `sheen` (Sheen): default #bcd8ff

### ORB-06

a hundred glowing lattices stacked through the ball, interfering

Import: `import { orb06 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-06/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `drift` (Layer walk): 0 to 0.3, default 0.02, step 0.002
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Pattern scale): 0.3 to 20, default 4, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.3, step 0.02
- `depth` (Stack depth): 0 to 1.6, default 0.7, step 0.01
- `freq` (Lattice spacing): 0.05 to 5, default 0.7, step 0.01
- `glowSize` (Glow size): 0.002 to 1, default 0.05, step 0.002
- `hueRate` (Hue per layer): 0 to 0.5, default 0.037, step 0.002
- `exposure` (Exposure): 0.05 to 200, default 4, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.1, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.2, step 0.02
- `light` (Key light): 0 to 3, default 0.45, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.4, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff
- `sheen` (Sheen): default #bcd8ff

### ORB-07

a twist wave travelling out through the ball around a lit column

Import: `import { orb07 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-07/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Cell shimmer): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `wave` (Wave speed): 0 to 8, default 0.7, step 0.03, integrated phase clock
- `twist` (Twist): 0 to 8, default 1, step 0.02
- `spin` (Roll): 0 to 3, default 0.1, step 0.015, integrated phase clock
- `tilt` (Axis lean): -1.5 to 1.5, default 0.3, step 0.015
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `turb` (Cell turbulence): 0 to 5, default 1, step 0.03
- `column` (Column release): 0 to 1, default 0, step 0.01
- `stepScale` (Step scale): 0.005 to 1.5, default 0.1, step 0.005
- `hueDepth` (Depth hue): 0 to 10, default 0.75, step 0.03
- `hueStep` (Step hue): 0 to 10, default 0.45, step 0.03
- `envRadius` (Envelope radius): 0.15 to 15, default 2.6, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 0.88, step 0.01
- `fill` (Body fill): 0 to 100, default 0.15, step 0.3
- `stepClamp` (Step clamp): 3 to 5000, default 400, step 10
- `scatter` (Diffusion): 0 to 0.5, default 0.01, step 0.003
- `exposure` (Exposure): 1.5 to 5000, default 60, step 5
- `contrast` (Contrast): 0.15 to 15, default 1.3, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.15, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-08

mother-of-pearl contour bands, each layer its own hue

Import: `import { orb08 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-08/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Boil): 0.015 to 10, default 0.35, step 0.05, integrated phase clock
- `flow` (Band drift): 0 to 5, default 0.25, step 0.03, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.06, step 0.015, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Pattern scale): 0.3 to 20, default 5.5, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.3, step 0.02
- `warp` (Warp): 0 to 3, default 1, step 0.02
- `beat` (Warp beat): 0 to 1, default 0, step 0.01
- `thick` (Band width): 0.02 to 2, default 0.2, step 0.01
- `split` (Chromatic split): 0 to 1, default 0.1, step 0.005
- `iris` (Iridescence): 0 to 2, default 0.7, step 0.01
- `irisScale` (Iridescence scale): 0 to 2, default 0.315, step 0.005
- `view` (Angle shift): 0 to 3, default 1.34, step 0.01
- `floor` (Body fill): 0 to 3, default 0.8, step 0.01
- `gain` (Brightness): 0.05 to 5, default 1.1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.15, step 0.05
- `light` (Key light): 0 to 3, default 0.75, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.5, step 0.015

Colors (pass through `colors` as hex):

- `deep` (Shell body): default #0d1430
- `low` (Dim layer): default #2fb8c6
- `crest` (Bright layer): default #fff1de
- `sheen` (Sheen): default #bfe4ff

### ORB-09

torn rings of rainbow light worn as the ball's latitudes

Import: `import { orb09 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-09/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.6, step 0.05, integrated phase clock
- `spin` (Roll): 0 to 3, default 0.12, step 0.015, integrated phase clock
- `tilt` (Tilt): -1.5 to 1.5, default 0.4, step 0.015
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Ring spacing): 0.3 to 20, default 3.5, step 0.1
- `warp` (Tear): 0 to 3, default 0.45, step 0.02
- `seed` (Ring seed): 0 to 3, default 0.9, step 0.01
- `glow` (Ring glow): 0 to 1, default 0.05, step 0.002
- `lineSoft` (Ring width): 0.002 to 1, default 0.05, step 0.002
- `inner` (Inner falloff): 0.2 to 12, default 3, step 0.05
- `fringe` (Rainbow fringe): 0 to 2, default 0.1, step 0.005
- `fringeSoft` (Fringe width): 0.001 to 1, default 0.003, step 0.001
- `ringPhase` (Ring hue step): 0 to 3, default 0.8, step 0.01
- `exposure` (Exposure): 0.05 to 20, default 1.1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.1, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.2, step 0.02
- `light` (Key light): 0 to 3, default 0.5, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.4, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff
- `sheen` (Sheen): default #b9d6ff

### ORB-10

a lattice of light knitted into the ball's own skin

Import: `import { orb10 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-10/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.6, step 0.05, integrated phase clock
- `scroll` (Climb): 0 to 8, default 1.2, step 0.03, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2, step 0.05
- `shellR` (Shell radius): 0.2 to 20, default 2.6, step 0.1
- `wrap` (Wraps around): 1 to 14, default 8, step 1
- `climb` (Band spacing): 0.05 to 12, default 4, step 0.05
- `turb` (Warp): 0 to 3, default 0.35, step 0.02
- `layer` (Layer offset): 0 to 2, default 0.5, step 0.01
- `cell` (Lattice weight): 0 to 2, default 0.45, step 0.01
- `stepScale` (Step scale): 0.02 to 3, default 0.15, step 0.005
- `hueStep` (Layer hue): 0 to 3, default 0.4, step 0.01
- `spread` (Colour spread): 0 to 3, default 1, step 0.02
- `envRadius` (Envelope radius): 0.15 to 20, default 2.9, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 0.92, step 0.01
- `fill` (Body fill): 0 to 40, default 0.1, step 0.05
- `stepClamp` (Step clamp): 5 to 5000, default 300, step 5
- `scatter` (Diffusion): 0 to 0.2, default 0.004, step 0.0005
- `exposure` (Exposure): 0.05 to 500, default 30, step 0.5
- `contrast` (Contrast): 0.15 to 15, default 1.15, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.2, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-11

quantum orbital, rainbow chroma

Import: `import { orb11 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-11/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.9, step 0.05, integrated phase clock
- `rotSpeed` (Rotation speed): 0 to 5, default 0.5, step 0.05
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `swell` (Input swell): 0 to 1, default 0.07, step 0.01
- `posScale` (Orbital zoom): 0.15 to 10, default 0.5, step 0.05
- `flowSpeed` (Flow speed): 0 to 10, default 0.35, step 0.05, integrated phase clock
- `flowAmp` (Flow amount): 0 to 4, default 0.45, step 0.05
- `flowScale` (Flow scale): 0.3 to 10, default 0.3, step 0.1
- `precess` (Precession): 0 to 4, default 0.3, step 0.05
- `radialPow` (Radial power): 0.5 to 15, default 0.5, step 0.1
- `radialDecay` (Radial decay): 0.3 to 30, default 1, step 0.15
- `probPow` (Probability curve): 0.1 to 3, default 0.4, step 0.015
- `probGain` (Probability gain): 0.15 to 15, default 3, step 0.1
- `waveFreq` (Wave frequency): 0 to 20, default 4, step 0.5
- `chromaSpread` (Chroma spread): 0 to 1.5, default 0.18, step 0.01
- `glow` (Glow): 0 to 5, default 0.9, step 0.05
- `metalDark` (Metal darkness): 0 to 3, default 0, step 0.015
- `baseVis` (Base visibility): 0 to 1.5, default 0.12, step 0.01

### ORB-12

a ball of glossy toy bricks, studs up — it rebuilds itself while it thinks

Import: `import { orb12 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-12/

Parameters (pass through `params`; values are clamped to the range):

- `spin` (Spin): 0 to 5, default 0.25, step 0.03, integrated phase clock
- `tilt` (Tilt): 0 to 4, default 0.55, step 0.02
- `rebuild` (Rebuild rate): 0 to 20, default 0.4, step 0.1, integrated phase clock
- `gap` (Missing bricks): 0 to 0.8, default 0.07, step 0.01
- `studs` (Studs): 8 to 48, default 18, step 1
- `radius` (Radius): 0.15 to 3, default 0.95, step 0.015
- `patch` (Colour patches): 0 to 1, default 0.35, step 0.01
- `stud` (Stud relief): 0 to 1, default 0.85, step 0.01
- `seam` (Seams): 0 to 1, default 0.6, step 0.01
- `gloss` (Gloss): 0 to 3, default 1, step 0.02
- `light` (Key light): 0 to 3, default 1, step 0.015
- `gain` (Gain): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1, step 0.05

Colors (pass through `colors` as hex):

- `brickA` (Red): default #c4281c
- `brickB` (Yellow): default #f2cd37
- `brickC` (Blue): default #1e5aa8
- `brickD` (Green): default #00852b
- `brickE` (White): default #f4f4f4

### ORB-13

plasma globe: crawling lightning filaments

Import: `import { orb13 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-13/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 1, step 0.05, integrated phase clock
- `spin` (Spin rate): 0 to 5, default 0.2, step 0.03, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `envRadius` (Globe radius): 0.15 to 15, default 2.6, step 0.1
- `swell` (Input swell): 0 to 1, default 0.15, step 0.01
- `tilt` (Axis tilt): 0 to 4, default 0.4, step 0.02
- `fils` (Filament density): 0.5 to 12, default 6, step 0.1
- `writhe` (Writhe): 0 to 3, default 0.9, step 0.02
- `writheFreq` (Writhe frequency): 0.2 to 8, default 1.6, step 0.05
- `sharp` (Arc sharpness): 0.5 to 60, default 4, step 0.5
- `soft` (Arc core softness): 0.002 to 0.5, default 0.06, step 0.002
- `whiten` (Core whitening): 0 to 0.2, default 0.008, step 0.002
- `coreGain` (Nucleus glow): 0 to 5, default 1.6, step 0.05
- `tipGain` (Glass flare): 0 to 6, default 1.8, step 0.05
- `fill` (Body haze): 0 to 2, default 0.02, step 0.01
- `stepClamp` (Step clamp): 0.3 to 300, default 40, step 1.5
- `scatter` (Diffusion): 0 to 0.5, default 0.012, step 0.003
- `exposure` (Exposure): 0.1 to 200, default 11, step 0.5
- `contrast` (Contrast): 0.15 to 15, default 1, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.2, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2.5, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01

Colors (pass through `colors` as hex):

- `inner` (Nucleus): default #ff70d8
- `arc` (Arc): default #5a5cff
- `tint` (Tint): default #ffffff

### ORB-14

a lit plasma dome quantized to chunky two-tone pixels

Import: `import { orb14 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-14/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Wave speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `spin` (Roll): 0 to 5, default 0.15, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `cells` (Grid cells): 32 to 320, default 140, step 2
- `levels` (Tone steps): 2 to 8, default 3, step 1
- `scale` (Wave scale): 0.3 to 12, default 1.5, step 0.1
- `plasma` (Wave amount): 0 to 3, default 0.9, step 0.015
- `light` (Key light): 0 to 3, default 0.9, step 0.015
- `rim` (Rim light): 0 to 3, default 0.35, step 0.015
- `gain` (Brightness): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.1, step 0.05

Colors (pass through `colors` as hex):

- `ink` (Ink): default #101426
- `paper` (Paper): default #cfe6ff

### ORB-15

an iridescent particle-track web worn as the ball's skin

Import: `import { orb15 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-15/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `wander` (Axis wander): 0 to 3, default 0.15, step 0.015, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `fieldScale` (Web density): 1 to 20, default 2.4, step 0.1
- `turb` (Weave): 0 to 5, default 0.8, step 0.03
- `stepScale` (Skin depth): 0.0015 to 0.4, default 0.015, step 0.005
- `disperse` (Dispersion): 0 to 5, default 1, step 0.03
- `envRadius` (Envelope radius): 0.15 to 15, default 2.6, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 1, step 0.01
- `fill` (Body fill): 0 to 100, default 0.3, step 0.3
- `stepClamp` (Step clamp): 3 to 5000, default 150, step 30
- `scatter` (Diffusion): 0 to 0.5, default 0.01, step 0.003
- `exposure` (Exposure): 1.5 to 1500, default 50, step 10
- `contrast` (Contrast): 0.15 to 15, default 1.35, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.35, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-16

sunlight through water — a caustic net crawling over the ball, fringing into colour where it moves

Import: `import { orb16 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-16/

Parameters (pass through `params`; values are clamped to the range):

- `flow` (Water flow): 0.015 to 10, default 0.9, step 0.05, integrated phase clock
- `spin` (Turn): 0 to 5, default 0.08, step 0.03, integrated phase clock
- `swellRate` (Surge rate): 0 to 8, default 0.6, step 0.05, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Net scale): 3 to 30, default 9, step 0.1
- `warp` (Ripple depth): 0 to 3, default 0.8, step 0.02
- `edge` (Line sharpness): 0.5 to 10, default 2.2, step 0.05
- `split` (Colour fringe): 0 to 3, default 0.6, step 0.02
- `swell` (Surge depth): 0 to 1, default 0.15, step 0.01
- `gain` (Sun power): 0.05 to 6, default 1.6, step 0.05
- `contrast` (Tone knee): 0.15 to 6, default 1.1, step 0.05
- `light` (Floor light): 0 to 3, default 0.9, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.6, step 0.015

Colors (pass through `colors` as hex):

- `deep` (Water): default #0b2f6e
- `sun` (Caustic light): default #7ff6ff
- `sheen` (Sheen): default #bfe8ff

### ORB-17

a grainy many-coloured storm with band shear and lightning

Import: `import { orb17 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-17/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Storm speed): 0.015 to 10, default 0.9, step 0.05, integrated phase clock
- `spin` (Roll): 0 to 5, default 0.12, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Weather scale): 0.3 to 12, default 2.4, step 0.1
- `bands` (Band count): 0 to 20, default 6, step 0.1
- `shear` (Band shear): 0 to 5, default 1.1, step 0.03
- `warp` (Warp): 0 to 8, default 2.2, step 0.05
- `churn` (Churn): 0 to 8, default 1.4, step 0.05
- `gain` (Brightness): 0.05 to 5, default 1.15, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.35, step 0.05
- `grain` (Field grain): 0 to 2, default 0.4, step 0.01
- `filmGrain` (Film grain): 0 to 2, default 0.35, step 0.01
- `grainSize` (Grain size): 1 to 8, default 2, step 1
- `rainbow` (Iridescence): 0 to 2, default 0.65, step 0.01
- `flashRate` (Flash rate): 0 to 10, default 1.6, step 0.05
- `flash` (Flash power): 0 to 5, default 1.2, step 0.03
- `light` (Key light): 0 to 3, default 0.85, step 0.015
- `rim` (Rim light): 0 to 3, default 0.5, step 0.015

Colors (pass through `colors` as hex):

- `deep` (Deep): default #2a0f4e
- `low` (Low pressure): default #0fd0c3
- `mid` (Mid pressure): default #ff5e9d
- `hot` (High pressure): default #ffd166
- `flash` (Lightning): default #eaf4ff

### ORB-18

a crystal folded out of one eighth of space, tumbling

Import: `import { orb18 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-18/

Parameters (pass through `params`; values are clamped to the range):

- `wander` (Tumble): 0 to 5, default 0.5, step 0.02, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 4, step 0.3
- `focal` (Lens): 0.15 to 15, default 1.5, step 0.05
- `fold` (Octant fold): 0 to 1, default 1, step 0.01
- `crease` (Diagonal crease): 0 to 1, default 1, step 0.01
- `freq` (Crystal frequency): 0.1 to 20, default 5, step 0.05
- `stepScale` (Step scale): 0.02 to 2, default 0.3, step 0.01
- `hue` (Depth hue): 0 to 4, default 1.5, step 0.01
- `spread` (Colour spread): 0 to 3, default 1, step 0.02
- `envRadius` (Envelope radius): 0.15 to 15, default 2.1, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 0.9, step 0.01
- `fill` (Body fill): 0 to 20, default 0.02, step 0.01
- `stepClamp` (Step clamp): 1 to 2000, default 40, step 1
- `scatter` (Diffusion): 0 to 0.2, default 0.004, step 0.001
- `exposure` (Exposure): 0.2 to 500, default 18, step 0.5
- `contrast` (Contrast): 0.15 to 15, default 1.2, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.25, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-19

beads swelling and shrinking in their cells, packed over the ball

Import: `import { orb19 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-19/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.05, step 0.015, integrated phase clock
- `slide` (Drift): 0 to 4, default 0.1, step 0.02, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Packing scale): 0.3 to 30, default 10, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.3, step 0.02
- `grow` (Dot size): -0.2 to 1.2, default 0.185, step 0.005
- `vary` (Size variation): 0 to 0.4, default 0.13, step 0.005
- `skew` (Generator detune): 0 to 3, default 0.62, step 0.01
- `jitter` (Dot wander): 0 to 1.5, default 0.1, step 0.01
- `edge` (Rim hardness): 1 to 200, default 50, step 1
- `bead` (Bead shading): 0 to 1, default 0, step 0.01
- `gain` (Brightness): 0.05 to 4, default 1, step 0.02
- `contrast` (Contrast): 0.15 to 6, default 1, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.1, step 0.02
- `floorLevel` (Body fill): 0 to 2, default 0.06, step 0.01
- `light` (Key light): 0 to 3, default 0.3, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.35, step 0.015

Colors (pass through `colors` as hex):

- `low` (Dot): default #ffffff
- `high` (Dot accent): default #eef5ff
- `body` (Body): default #05070c
- `sheen` (Sheen): default #9dbfe4

### ORB-20

a water film rushing down the ball, fountain-style

Import: `import { orb20 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-20/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Ripple speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `flow` (Fall rush): 0 to 20, default 3, step 0.1, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `tilt` (Flow tilt): 0 to 4, default 0.15, step 0.02
- `stretch` (Fall stretch): 0.03 to 3, default 0.3, step 0.015
- `foam` (Foam): 0 to 3, default 0.3, step 0.015
- `wall` (Film sharpness): 0.15 to 20, default 3, step 0.1
- `stepScale` (Step scale): 0.015 to 1.5, default 0.2, step 0.01
- `hueScale` (Hue banding): 0 to 3, default 0.85, step 0.015
- `envRadius` (Envelope radius): 0.15 to 15, default 2.6, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 1, step 0.01
- `fill` (Body fill): 0 to 100, default 0.4, step 0.3
- `stepClamp` (Step clamp): 0.3 to 300, default 20, step 1.5
- `scatter` (Diffusion): 0 to 0.5, default 0.01, step 0.003
- `exposure` (Exposure): 1.5 to 1500, default 22, step 10
- `contrast` (Contrast): 0.15 to 15, default 1.15, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.55, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-21

light diffusing through a cloud

Import: `import { orb21 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-21/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 10, step 0.05, integrated phase clock
- `camDist` (Camera distance): 0.5 to 40, default 4.4, step 0.2
- `focal` (Lens): 0.3 to 15, default 1.8, step 0.1
- `radius` (Cloud radius): 0.15 to 10, default 2, step 0.05
- `scale` (Cloud scale): 0.1 to 15, default 0.8, step 0.1
- `churn` (Churn): 0 to 5, default 0.3, step 0.03
- `threshold` (Clumping): 0 to 3, default 0.075, step 0.015
- `edgeSoft` (Edge softness): 0.1 to 10, default 0.8, step 0.05
- `density` (Density): 0.03 to 20, default 3.2, step 0.1
- `absorb` (Absorption): 0.03 to 15, default 1.4, step 0.1
- `shadowAbsorb` (Shadow depth): 0 to 20, default 2.4, step 0.1
- `shadowLift` (Shadow lift): 0 to 5, default 0.55, step 0.03
- `aniso` (Forward scatter): -0.9 to 0.9, default 0.45, step 0.01
- `lightSpin` (Light orbit): 0 to 3, default 0.12, step 0.015
- `power` (Light power): 0.03 to 40, default 1.9, step 0.2
- `ambient` (Ambient): 0 to 3, default 0.12, step 0.015
- `exposure` (Exposure): 0.03 to 10, default 1, step 0.05
- `alphaGain` (Alpha gain): 0.05 to 10, default 1.5, step 0.05

Colors (pass through `colors` as hex):

- `light` (Light): default #ffd7a3
- `shadow` (Shadow): default #3a4a8c

### ORB-22

field lines swirling around the ball about a wandering axis

Import: `import { orb22 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-22/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `wander` (Axis wander): 0 to 3, default 0.12, step 0.015, integrated phase clock
- `camDist` (Camera distance): 1 to 50, default 7, step 0.3
- `focal` (Lens): 0.15 to 15, default 2.25, step 0.1
- `hug` (Surface hug): 0 to 3, default 0.8, step 0.015
- `turb` (Cell shimmer): 0 to 5, default 0.6, step 0.03
- `stepScale` (Step scale): 0.005 to 1.5, default 0.07, step 0.01
- `hueStep` (Step hue): 0 to 10, default 0.12, step 0.03
- `hueDepth` (Depth hue): 0 to 10, default 1.4, step 0.03
- `glow` (Vector glow): 0 to 10, default 1.4, step 0.05
- `glowFew` (Glow density): 0 to 1.5, default 0.12, step 0.01
- `envRadius` (Envelope radius): 0.15 to 15, default 2.6, step 0.1
- `envCore` (Envelope core): 0.3 to 1.02, default 0.88, step 0.01
- `fill` (Body fill): 0 to 100, default 0.15, step 0.3
- `stepClamp` (Step clamp): 3 to 5000, default 800, step 30
- `scatter` (Diffusion): 0 to 0.5, default 0.01, step 0.003
- `exposure` (Exposure): 1.5 to 5000, default 260, step 15
- `contrast` (Contrast): 0.15 to 15, default 1.3, step 0.1
- `saturation` (Saturation): 0 to 4, default 1.15, step 0.02
- `alphaGain` (Alpha gain): 0.05 to 15, default 2, step 0.1
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff

### ORB-23

an ASCII glyph matrix in CRT green, wrapped on the ball

Import: `import { orb23 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-23/

Parameters (pass through `params`; values are clamped to the range):

- `drift` (Drift): 0 to 10, default 0.55, step 0.05, integrated phase clock
- `scroll` (Scroll): 0 to 10, default 0.05, step 0.05, integrated phase clock
- `speed` (Pulse rate): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `pulse` (Pulse depth): 0 to 2, default 0, step 0.01
- `spin` (Roll): 0 to 5, default 0.12, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `cells` (Glyph grid): 16 to 120, default 40, step 2
- `scale` (Field scale): 0.3 to 10, default 1.6, step 0.1
- `density` (Glyph density): 0 to 2, default 0.48, step 0.01
- `dropout` (Dropout): 0 to 1, default 0.48, step 0.01
- `light` (Key light): 0 to 3, default 0.6, step 0.015
- `rim` (Rim glow): 0 to 3, default 0.45, step 0.015
- `gain` (Phosphor gain): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1, step 0.05

Colors (pass through `colors` as hex):

- `glow` (Glow): default #57ffc9
- `deep` (Deep): default #0b3b2d

### ORB-24

a Minecraft Earth — a perfect voxel sphere whose seasons cycle it through lush, cherry-grove, ice, mesa and desert worlds

Import: `import { orb24 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-24/

Parameters (pass through `params`; values are clamped to the range):

- `spin` (Spin): 0 to 5, default 0.22, step 0.03, integrated phase clock
- `tilt` (Tilt): 0 to 4, default 0.45, step 0.02
- `drift` (Terrain drift): 0 to 10, default 0.12, step 0.05, integrated phase clock
- `season` (Season rate): 0 to 10, default 0.3, step 0.05, integrated phase clock
- `shuffle` (Ember rate): 0 to 20, default 0.8, step 0.1, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 1.15, step 0.015
- `blocks` (Blocks): 16 to 96, default 64, step 1
- `rough` (Mountains): 0 to 0.8, default 0.45, step 0.01
- `scale` (Terrain scale): 0.5 to 8, default 2.4, step 0.05
- `sea` (Sea level): 0 to 1, default 0.5, step 0.01
- `trees` (Trees): 0 to 1, default 0.75, step 0.01
- `cave` (Caves): 0 to 1, default 0.4, step 0.01
- `ore` (Ore density): 0 to 0.6, default 0.12, step 0.01
- `glow` (Ore glow): 0 to 5, default 0.9, step 0.03
- `core` (Molten core): 0 to 1, default 0.5, step 0.01
- `texture` (Texture grain): 0 to 1, default 0.6, step 0.01
- `light` (Key light): 0 to 3, default 1, step 0.015
- `gain` (Gain): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1, step 0.05

Colors (pass through `colors` as hex):

- `grass` (Grass): default #6abe30
- `dirt` (Mud): default #6f4a2f
- `stone` (Stone): default #8a8a90
- `sand` (Sand): default #dbcf9c
- `water` (Water): default #2f66d0
- `leaf` (Leaves): default #3e8f27
- `ore` (Ore): default #4de3ff
- `lava` (Lava): default #ff7b26

### ORB-25

the folds of a warped field, drawn by their own steepness

Import: `import { orb25 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-25/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Boil): 0.015 to 20, default 3, step 0.05, integrated phase clock
- `drift` (Drift): 0 to 8, default 0.6, step 0.02, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.05, step 0.015, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Cell scale): 0.3 to 60, default 7.5, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.3, step 0.02
- `warp` (Fold): 0 to 2, default 0.4, step 0.01
- `zoom` (Octave zoom): 0.6 to 2, default 1.111, step 0.005
- `ripple` (Ripple): 0.02 to 3, default 0.3, step 0.01
- `edgeGain` (Edge gain): 0.5 to 60, default 10, step 0.5
- `blur` (Rim width): 0.5 to 12, default 2.5, step 0.25
- `fringe` (Chromatic fringe): 0 to 1.5, default 0.09, step 0.005
- `exposure` (Exposure): 0.05 to 40, default 0.8, step 0.05
- `contrast` (Contrast): 0.15 to 8, default 1.15, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.5, step 0.02
- `floorLevel` (Body fill): 0 to 2, default 0.16, step 0.01
- `light` (Key light): 0 to 3, default 0.35, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.45, step 0.015

Colors (pass through `colors` as hex):

- `tint` (Rim): default #dbe8f7
- `body` (Body): default #0d1118
- `sheen` (Sheen): default #a8c8f0

### ORB-26

a crazed web of coloured threads knotted to a cell grid

Import: `import { orb26 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-26/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Boil): 0.015 to 10, default 0.4, step 0.05, integrated phase clock
- `swirl` (Swirl): 0 to 3, default 0.07, step 0.015, integrated phase clock
- `drift` (Crazing drift): 0 to 5, default 0.18, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Cell scale): 0.3 to 20, default 9, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.25, step 0.02
- `warp` (Warp): 0 to 3, default 0.85, step 0.02
- `pole` (Knot strength): 0 to 2, default 0.25, step 0.005
- `poleSoft` (Knot size): 0.001 to 1, default 0.012, step 0.001
- `pulse` (Cell breathing): 0 to 2, default 0.35, step 0.01
- `sharp` (Thread width): 0.3 to 20, default 4.5, step 0.05
- `split` (Chromatic split): 0 to 1, default 0.045, step 0.005
- `core` (Hot core): 0 to 3, default 0.45, step 0.015
- `floor` (Body fill): 0 to 3, default 0.9, step 0.01
- `gain` (Brightness): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1.35, step 0.05
- `light` (Key light): 0 to 3, default 0.7, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.45, step 0.015

Colors (pass through `colors` as hex):

- `deep` (Glaze): default #111a2e
- `line` (Thread): default #3fd2ff
- `hot` (Hot thread): default #fff4d6
- `sheen` (Sheen): default #a9d8ff

### ORB-27

a weather-radar mosaic, fronts of coloured pixels sweeping the ball

Import: `import { orb27 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-27/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Front speed): 0.015 to 10, default 0.6, step 0.05, integrated phase clock
- `spin` (Roll): 0 to 5, default 0.04, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Grid zoom): 0.3 to 8, default 2.4, step 0.05
- `cells` (Grid): 8 to 120, default 34, step 1
- `dot` (Dot size): 0.1 to 0.5, default 0.36, step 0.01
- `swirl` (Swirl): 0 to 8, default 1.5, step 0.05
- `vortex` (Vortex size): 0.1 to 2, default 0.45, step 0.01
- `freq` (Storm scale): 0.2 to 8, default 1.6, step 0.05
- `warp` (Bend): 0 to 3, default 0.5, step 0.02
- `lo` (Quiet threshold): 0 to 1, default 0.12, step 0.005
- `hi` (Peak threshold): 0 to 1, default 0.82, step 0.005
- `curve` (Response curve): 0.5 to 4, default 1.4, step 0.05
- `dither` (Class dither): 0 to 0.6, default 0.12, step 0.005
- `sparse` (Quiet density): 0 to 1, default 0.16, step 0.01
- `density` (Fill): 0 to 1.5, default 1, step 0.01
- `twinkle` (Twinkle rate): 0 to 30, default 3, step 0.5
- `grain` (Paper grain): 0 to 1, default 0.1, step 0.01
- `light` (Key light): 0 to 1, default 0.18, step 0.01
- `rim` (Rim): 0 to 1, default 0.35, step 0.01

Colors (pass through `colors` as hex):

- `paper` (Paper): default #efe9dc
- `c0` (Quiet): default #a9a9a6
- `c1` (Class 1): default #2e5df0
- `c2` (Class 2): default #38d9ec
- `c3` (Class 3): default #22c35c
- `c4` (Class 4): default #e8322a
- `c5` (Class 5): default #f5d020
- `c6` (Peak): default #e030c0

### ORB-28

nested binary grids shuttering on a tumbling bit-sphere

Import: `import { orb28 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-28/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Shutter drift): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `spin` (Tumble rate): 0 to 5, default 0.15, step 0.03, integrated phase clock
- `tilt` (Tumble tilt): 0 to 4, default 0.5, step 0.02
- `radius` (Radius): 0.1 to 3, default 0.9, step 0.015
- `gridScale` (Grid scale): 0.5 to 20, default 2, step 0.1
- `levels` (Bit depth): 4 to 20, default 12, step 1
- `lineW` (Line width): 0.5 to 15, default 2, step 0.1
- `shutter` (Shutter): 0 to 4, default 1, step 0.02
- `gain` (Line gain): 0.05 to 10, default 1, step 0.05
- `body` (Body glow): 0 to 5, default 1, step 0.03
- `rim` (Rim light): 0 to 5, default 0.6, step 0.03
- `rimPow` (Rim tightness): 0.3 to 20, default 3, step 0.1
- `contrast` (Contrast): 0.15 to 10, default 1, step 0.05
- `edge` (Edge sharpness): 0 to 1, default 1, step 0.01
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.98, step 0.015

Colors (pass through `colors` as hex):

- `lineA` (X lines): default #ff5a4d
- `lineB` (Y lines): default #59d8ff
- `base` (Body): default #101528
- `rim` (Rim): default #bcd8ff

### ORB-29

an LED tile wall lighting up in flowing blobs, wrapped on the ball

Import: `import { orb29 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-29/

Parameters (pass through `params`; values are clamped to the range):

- `drift` (Drift): 0 to 10, default 0.45, step 0.05, integrated phase clock
- `churn` (Churn): 0 to 10, default 0.5, step 0.05, integrated phase clock
- `swirl` (Fluidity): 0 to 3, default 1.2, step 0.015
- `shuffle` (Shuffle): 0 to 20, default 0.6, step 0.1, integrated phase clock
- `pulse` (Pulse depth): 0 to 2, default 0, step 0.01
- `spin` (Roll): 0 to 5, default 0.1, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `cells` (Tile grid): 16 to 160, default 48, step 2
- `scale` (Blob scale): 0.3 to 10, default 1.3, step 0.1
- `coverage` (Coverage): 0 to 1.2, default 0.52, step 0.01
- `confetti` (Confetti): 0 to 1, default 0.22, step 0.01
- `light` (Key light): 0 to 3, default 0.6, step 0.015
- `gain` (Panel gain): 0.05 to 5, default 1, step 0.05
- `contrast` (Contrast): 0.15 to 10, default 1, step 0.05

Colors (pass through `colors` as hex):

- `lit` (Lit tile): default #fff2dd
- `wall` (Wall): default #161616

### ORB-30

a meadow folding into itself toward a blue vanishing point

Import: `import { orb30 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-30/

Parameters (pass through `params`; values are clamped to the range):

- `fall` (Fall speed): 0 to 4, default 0.12, step 0.01, integrated phase clock
- `tilt` (Frame tilt): -1.6 to 1.6, default 0, step 0.01
- `drift` (Weather drift): 0 to 4, default 0.2, step 0.02, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Tunnel scale): 0.3 to 20, default 4.5, step 0.1
- `bulge` (Dome bulge): 0 to 4, default 0.25, step 0.02
- `ratio` (Frame ratio): 1.1 to 6, default 1.8, step 0.02
- `horizon` (Horizon): -0.9 to 0.9, default 0.14, step 0.01
- `cloudScale` (Cloud scale): 0.1 to 8, default 1.6, step 0.05
- `cloudCover` (Cloud cover): 0.02 to 0.98, default 0.46, step 0.01
- `streakFreq` (Wall detail): 0.2 to 20, default 5, step 0.1
- `streakRad` (Smear): 0.02 to 4, default 0.5, step 0.02
- `water` (Water): 0 to 1, default 0.7, step 0.01
- `flowerScale` (Flower scale): 2 to 120, default 44, step 1
- `flowerDensity` (Flower density): 0 to 1, default 0.55, step 0.01
- `flowerSize` (Flower size): 0.05 to 0.6, default 0.26, step 0.01
- `frameShade` (Frame shading): 0.2 to 1.4, default 0.62, step 0.01
- `haze` (Aerial haze): 0 to 1, default 0.85, step 0.01
- `hazeRange` (Haze reach): 0.005 to 1.5, default 0.09, step 0.005
- `gain` (Brightness): 0.05 to 4, default 1.05, step 0.02
- `contrast` (Contrast): 0.15 to 10, default 1.05, step 0.05
- `saturation` (Saturation): 0 to 4, default 1.1, step 0.02
- `light` (Key light): 0 to 3, default 0.35, step 0.015
- `rim` (Rim sheen): 0 to 3, default 0.55, step 0.015

Colors (pass through `colors` as hex):

- `sky` (Sky): default #4a92e0
- `cloud` (Cloud): default #f7fbff
- `canopy` (Canopy): default #12401f
- `meadow` (Meadow): default #5aa63a
- `water` (Water): default #156f6a
- `bloom` (Bloom): default #ff6a3a
- `sheen` (Sheen): default #cfe6ff

### ORB-31

raymarched shell, volumetric godrays

Import: `import { orb31 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-31/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Anim speed): 0.015 to 10, default 1, step 0.05, integrated phase clock
- `sweepRate` (Sweep rate): 0 to 6, default 0.5, step 0.02, integrated phase clock
- `radius` (Shell radius): 0.4 to 10, default 2.6, step 0.05
- `swell` (Input swell): 0 to 3, default 0.18, step 0.015
- `warp` (Warp divisor): 0.3 to 10, default 0.9, step 0.05
- `warpFreq` (Warp frequency): 0.15 to 30, default 5.25, step 0.15
- `warpSwing` (Warp swing): 0 to 8, default 0, step 0.05
- `freqSwing` (Frequency swing): 0 to 15, default 0, step 0.05
- `smoothSwing` (Softness swing): 0 to 2, default 0, step 0.005
- `smoothK` (Blend softness): 0.015 to 4, default 0.42, step 0.02
- `rayGain` (Godray gain): 0 to 4, default 0.8, step 0.02
- `rayFalloff` (Godray falloff): 0.3 to 100, default 10.5, step 0.5
- `surfaceLit` (Surface light): 0 to 3, default 0.105, step 0.015
- `ambient` (Ambient): 0 to 1, default 0, step 0.005
- `alphaGain` (Alpha gain): 0.05 to 15, default 3, step 0.1
- `edgeFade` (Halo falloff): 0.1 to 0.985, default 0.45, step 0.015
- `camDist` (Camera distance): 1.5 to 100, default 12, step 0.5
- `fov` (Lens): 0.3 to 20, default 3.5, step 0.1
- `stepScale` (Step safety): 0.3 to 30, default 9, step 0.5
- `maxDist` (Max distance): 3 to 100, default 22, step 1

### ORB-32

a galaxy marched as gas and dust inside the ball

Import: `import { orb32 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-32/

Parameters (pass through `params`; values are clamped to the range):

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

Colors (pass through `colors` as hex):

- `tint` (Tint): default #ffffff
- `core` (Core): default #fff3d6
- `inner` (Inner arms): default #7fb4ff
- `outer` (Outer arms): default #c46bff
- `deep` (Night): default #04050f
- `rim` (Rim): default #8fb0ff

### ORB-33

a thermal image, risograph-printed on the ball

Import: `import { orb33 } from "react-native-shader-orbs"`. Moods: idle, speaking, thinking. Docs: https://react-native-shader-orbs.vercel.app/docs/components/orbs/orb-33/

Parameters (pass through `params`; values are clamped to the range):

- `speed` (Drift): 0.015 to 10, default 0.5, step 0.05, integrated phase clock
- `spin` (Roll): 0 to 5, default 0.05, step 0.03, integrated phase clock
- `radius` (Radius): 0.15 to 3, default 0.9, step 0.015
- `scale` (Zoom): 0.3 to 8, default 3, step 0.05
- `freq` (Pool scale): 0.2 to 6, default 1.4, step 0.05
- `warp` (Warp): 0 to 3, default 0.6, step 0.02
- `lo` (Cold threshold): 0 to 1, default 0.42, step 0.005
- `hi` (Hot threshold): 0 to 1, default 0.74, step 0.005
- `gain` (Heat gain): 0.1 to 6, default 1, step 0.02
- `jitter` (Heat jitter): 0 to 0.5, default 0.015, step 0.005
- `bands` (Contour bands): 2 to 24, default 7, step 1
- `banding` (Contour strength): 0 to 1, default 0.85, step 0.01
- `contrast` (Contrast): 0.3 to 3, default 1, step 0.02
- `dither` (Dither): 0 to 0.6, default 0.05, step 0.005
- `dots` (Screen pitch): 4 to 120, default 46, step 1
- `dotGain` (Dot gain): 0.2 to 2, default 1, step 0.01
- `dotSoft` (Dot softness): 0.01 to 0.3, default 0.12, step 0.005
- `misregister` (Misregistration): 0 to 3, default 0.5, step 0.02
- `ink` (Ink density): 0 to 1, default 0.92, step 0.01
- `printMix` (Print mix): 0 to 1, default 0.28, step 0.01
- `grain` (Paper grain): 0 to 2, default 0.35, step 0.01
- `grainSize` (Grain size): 1 to 8, default 2, step 1
- `light` (Key light): 0 to 1, default 0.25, step 0.01
- `rim` (Rim light): 0 to 3, default 0.25, step 0.015

Colors (pass through `colors` as hex):

- `cold` (Cold): default #0b0a1e
- `cool` (Cool): default #3b2a9a
- `warm` (Warm): default #f05a28
- `hot` (Hot): default #f6b53a
- `core` (Core): default #fff1e6
- `paper` (Paper): default #f4ecdf