Installation
$ pnpm dlx shadcn@latest add @shadercn/orb-01
Usage
import { Orb01 } from "@/components/orbs/orb-01";<Orb01 size={280} state="idle" />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
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 | 0.5 |
spin | Spin rate | 0 – 5 | 0.03 | 0.25 |
camDist | Camera distance | 1 – 50 | 0.3 | 7 |
focal | Lens | 0.15 – 15 | 0.1 | 2.25 |
tilt | Field tilt | 0 – 4 | 0.02 | 0.5 |
turb | Turbulence | 0 – 5 | 0.03 | 0.3 |
sheets | Sheet density | 1 – 60 | 0.5 | 7 |
disperse | Dispersion | 0 – 5 | 0.03 | 1 |
stria | Striation depth | 0 – 10 | 0.05 | 1 |
envRadius | Envelope radius | 0.15 – 15 | 0.1 | 2.6 |
envCore | Envelope core | 0.3 – 1.02 | 0.01 | 1 |
fill | Body fill | 0 – 100 | 0.3 | 1.5 |
stepClamp | Step clamp | 0.3 – 300 | 1.5 | 20 |
scatter | Diffusion | 0 – 0.5 | 0.003 | 0.02 |
exposure | Exposure | 1.5 – 1500 | 10 | 60 |
contrast | Contrast | 0.15 – 15 | 0.1 | 1 |
saturation | Saturation | 0 – 4 | 0.02 | 1 |
alphaGain | Alpha gain | 0.05 – 15 | 0.1 | 2 |
edge | Edge sharpness | 0 – 1 | 0.01 | 1 |
edgeFade | Halo falloff | 0.1 – 3 | 0.015 | 0.98 |
Colours are passed through colors as hex strings.
| Colour | Label | Default |
|---|---|---|
tint | Tint | #ffffff |
Credits
Based on original work by XorDev.