# ORB-30

a meadow folding into itself toward a blue vanishing point

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<OrbPreview slug="orb-30" />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

    <TabsTrigger value="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadercn.vercel.app/r/orb-30.json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      pnpm add vgpu
      ```

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource src="components/orbs/orb-30.tsx" base="shadercn" title="components/orbs/orb-30.tsx" />

      <ComponentSource src="components/orbs/orbkit-core-wgpu.tsx" base="shadercn" title="components/orbs/orbkit-core-wgpu.tsx" />

      <ComponentSource src="components/orbs/orbkit-renderer.ts" base="shadercn" title="components/orbs/orbkit-renderer.ts" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { Orb30 } from "@/components/orbs/orb-30";
```

```tsx
<Orb30 size={280} state="idle" />
```

## Props [#props]

### Component Props [#component-props]

| Prop             | Type                                                             | Default  | Description                                  |
| ---------------- | ---------------------------------------------------------------- | -------- | -------------------------------------------- |
| `state`          | `"idle" \| "thinking" \| "speaking"`                             | `"idle"` | Drive preset the orb eases toward            |
| `size`           | `number`                                                         | `280`    | Rendered size in CSS pixels                  |
| `params`         | `Partial<Record<string, number>>`                                | -        | Shader param overrides, see Shader Props     |
| `colors`         | `Partial<Record<string, string>>`                                | -        | Shader colour overrides as hex strings       |
| `statePresets`   | `Partial<Record<OrbState, Record<string, number>>>`              | -        | Replace the built-in per-state param presets |
| `stateColors`    | `Partial<Record<OrbState, Record<string, string>>>`              | -        | Replace the built-in per-state colours       |
| `stateVolumes`   | `Partial<Record<OrbState, { input?: number; output?: number }>>` | -        | Pin the drive volumes a state settles on     |
| `volumes`        | `{ input?: number; output?: number }`                            | -        | Drive the orb directly, bypassing synthesis  |
| `paused`         | `boolean`                                                        | `false`  | Freeze the frame loop                        |
| `pauseOffscreen` | `boolean`                                                        | `true`   | Stop rendering while scrolled out of view    |
| `maxDpr`         | `number`                                                         | `2`      | Upper bound on the device pixel ratio        |
| `className`      | `string`                                                         | -        | Class on the wrapper element                 |
| `style`          | `CSSProperties`                                                  | -        | Inline style on the wrapper element          |
| `ariaLabel`      | `string`                                                         | -        | Accessible name for the canvas               |

### Shader Props [#shader-props]

Pass any of these through `params`; each is a single `f32` uniform read by the shader.

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

Colours are passed through `colors` as hex strings.

| Colour   | Label  | Default   |
| -------- | ------ | --------- |
| `sky`    | Sky    | `#4a92e0` |
| `cloud`  | Cloud  | `#f7fbff` |
| `canopy` | Canopy | `#12401f` |
| `meadow` | Meadow | `#5aa63a` |
| `water`  | Water  | `#156f6a` |
| `bloom`  | Bloom  | `#ff6a3a` |
| `sheen`  | Sheen  | `#cfe6ff` |

## Credits [#credits]

Shader by [XorDev](https://x.com/XorDev), ported from [orbkit](https://github.com/zzzzshawn/orbkit) (WebGL/GLSL) to WebGPU/WGSL.