ORB-30

a meadow folding into itself toward a blue vanishing point

Installation


$ pnpm dlx shadcn@latest add https://shadercn.vercel.app/r/orb-30.json

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

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

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

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.

Shader by XorDev, ported from orbkit (WebGL/GLSL) to WebGPU/WGSL.

On This Page