ORB-31

Raymarched shell, volumetric godrays

Installation


$ pnpm dlx shadcn@latest add @shadercn/orb-31

import { Orb31 } from "@/components/orbs/orb-31";

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

Based on original work by XorDev.

On This Page