Usage

Every orb takes the same small prop surface. Shader parameters are optional — leave them out and the orb follows the preset for its current state.

Basic

import { Shdr01 } from "@/components/ui/shdr-01";

export function AgentAvatar() {
  return <Shdr01 size={280} state="idle" />;
}

Driving it from your agent

Map your own connection state onto the orb's three states. The orb handles the transition — params glide, and the animation phase stays continuous.

const orbState =
  status === "connecting" ? "thinking"
  : isAgentSpeaking ? "speaking"
  : "idle";

return <Shdr01 size={320} state={orbState} />;

Props

PropTypeDefaultNotes
sizenumber280Rendered diameter in CSS pixels.
state"idle" | "thinking" | "speaking""idle"Drives the synthesized volume signals.
paramsPartial<Record<string, number>>—Any key here overrides the state preset for that param.
colorsPartial<Record<string, string>>—Hex overrides, where the orb declares colors.
pausedbooleanfalseFreeze on the current frame.
pauseOffscreenbooleantrueStop rendering while scrolled out of view.
maxDprnumber2Device-pixel-ratio ceiling.
wrapperOrbWrapper"none"Decoration drawn around the orb: none, glass, ring, dotted, ticks, reticle, grid, halftone, scanlines.
wrapperColorstring"currentColor"What the wrapper draws its lines in. Glass ignores it.
classNamestring—Applied to the outermost element.
styleCSSProperties—Merged onto the outermost element's style.
ariaLabelstring—When set the orb is role=img; otherwise it is aria-hidden.

Sizing

size sets both width and height. To size from CSS instead, drop size and give the canvas a class — the runtime tracks the element box with a ResizeObserver and re-renders at the new resolution.

<Shdr01 className="size-full" state="speaking" />

Shader parameters — SHDR-01

cut-glass orb with a dispersive, turbulent interior. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
spinSpin rate0 – 50.25
camDistCamera distance1 – 507
focalLens0.15 – 152.25
tiltField tilt0 – 40.5
turbTurbulence0 – 50.3
sheetsSheet density1 – 607
disperseDispersion0 – 51
striaStriation depth0 – 101
envRadiusEnvelope radius0.15 – 152.6
envCoreEnvelope core0.3 – 1.021
fillBody fill0 – 1001.5
stepClampStep clamp0.3 – 30020
scatterDiffusion0 – 0.50.02
exposureExposure1.5 – 150060
contrastContrast0.15 – 151
saturationSaturation0 – 41
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-02

ornate scrollwork on a rolling dome. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
swirlSwirl0 – 30.06
radiusRadius0.15 – 30.9
swellInput swell0 – 10.06
zoomPattern zoom0.15 – 404.4
bulgeSphere bulge0 – 100.35
warpFreqWarp frequency0.05 – 101.5
hueShiftHue shift0 – 6.2830
coreClampFlare size0.003 – 30.12
falloffFill0.05 – 41
gainExposure0.015 – 100.55
rimRim light0 – 30.12
rimPowRim tightness0.15 – 152.2
alphaGainAlpha gain0.05 – 152.4
baseVisBase visibility0 – 1.50.08

Shader parameters — SHDR-03

a turbulent belt of light girdling the ball, contoured in rainbow. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.6
wanderBelt tilt drift0 – 50.3
feedbackTilt feedback0 – 401.5
camDistCamera distance1 – 505
focalLens0.15 – 151.05
shellRShell radius0.2 – 203
shellWShell weight0.005 – 10.12
planeBelt tightness0 – 10.15
turbWarp0 – 40.55
widthBelt width0.0005 – 0.40.004
pulseBelt breathing0 – 10
surgeBelt surge0 – 10
hueContour hue0 – 6025
spreadColour spread0 – 31
envRadiusEnvelope radius0.15 – 203.3
envCoreEnvelope core0.3 – 1.020.92
fillBody fill0 – 400.1
stepClampStep clamp5 – 200001500
scatterDiffusion0 – 0.10.0006
exposureExposure20 – 1000001500
contrastContrast0.15 – 151.2
saturationSaturation0 – 41.25
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-04

a hollow shell of light, faceted by a voxel lattice. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.6
camDistCamera distance1 – 609
focalLens0.15 – 151.35
shellRShell radius0.3 – 205
pitchFacet size0.005 – 1.50.3
turbDisplacement0 – 50.45
slackTrace slack0.01 – 0.90.1
widthSurface width0.0005 – 0.30.003
hueGainPosition hue0 – 61
floorLevelWhite floor0 – 40.8
envScaleSilhouette margin1 – 21.16
exposureExposure20 – 400003000
contrastContrast0.15 – 151.3
saturationSaturation0 – 41.3
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-05

rainbow rings travelling through a lattice of lenses. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
ringRing speed0 – 80.9
swirlSwirl0 – 30.05
slideLattice slide0 – 40.12
radiusRadius0.15 – 30.9
scaleLattice scale0.3 – 205
bulgeDome bulge0 – 40.3
lensLens strength0 – 41
poleSoftWall softness0.0008 – 0.50.02
freqRing frequency0.05 – 81
spreadColour split0 – 41
gainBrightness0.05 – 41.1
contrastContrast0.15 – 61
saturationSaturation0 – 41.15
floorLevelBody fill0 – 20.12
lightKey light0 – 30.4
rimRim sheen0 – 30.45

Shader parameters — SHDR-06

a hundred glowing lattices stacked through the ball, interfering. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
driftLayer walk0 – 0.30.02
radiusRadius0.15 – 30.9
scalePattern scale0.3 – 204
bulgeDome bulge0 – 40.3
depthStack depth0 – 1.60.7
freqLattice spacing0.05 – 50.7
glowSizeGlow size0.002 – 10.05
hueRateHue per layer0 – 0.50.037
exposureExposure0.05 – 2004
contrastContrast0.15 – 101.1
saturationSaturation0 – 41.2
lightKey light0 – 30.45
rimRim sheen0 – 30.4

Shader parameters — SHDR-07

a twist wave travelling out through the ball around a lit column. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedCell shimmer0.015 – 100.5
waveWave speed0 – 80.7
twistTwist0 – 81
spinRoll0 – 30.1
tiltAxis lean-1.5 – 1.50.3
camDistCamera distance1 – 507
focalLens0.15 – 152.25
turbCell turbulence0 – 51
columnColumn release0 – 10
stepScaleStep scale0.005 – 1.50.1
hueDepthDepth hue0 – 100.75
hueStepStep hue0 – 100.45
envRadiusEnvelope radius0.15 – 152.6
envCoreEnvelope core0.3 – 1.020.88
fillBody fill0 – 1000.15
stepClampStep clamp3 – 5000400
scatterDiffusion0 – 0.50.01
exposureExposure1.5 – 500060
contrastContrast0.15 – 151.3
saturationSaturation0 – 41.15
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-08

mother-of-pearl contour bands, each layer its own hue. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedBoil0.015 – 100.35
flowBand drift0 – 50.25
swirlSwirl0 – 30.06
radiusRadius0.15 – 30.9
scalePattern scale0.3 – 205.5
bulgeDome bulge0 – 40.3
warpWarp0 – 31
beatWarp beat0 – 10
thickBand width0.02 – 20.2
splitChromatic split0 – 10.1
irisIridescence0 – 20.7
irisScaleIridescence scale0 – 20.315
viewAngle shift0 – 31.34
floorBody fill0 – 30.8
gainBrightness0.05 – 51.1
contrastContrast0.15 – 101.15
lightKey light0 – 30.75
rimRim sheen0 – 30.5

Shader parameters — SHDR-09

torn rings of rainbow light worn as the ball's latitudes. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.6
spinRoll0 – 30.12
tiltTilt-1.5 – 1.50.4
radiusRadius0.15 – 30.9
scaleRing spacing0.3 – 203.5
warpTear0 – 30.45
seedRing seed0 – 30.9
glowRing glow0 – 10.05
lineSoftRing width0.002 – 10.05
innerInner falloff0.2 – 123
fringeRainbow fringe0 – 20.1
fringeSoftFringe width0.001 – 10.003
ringPhaseRing hue step0 – 30.8
exposureExposure0.05 – 201.1
contrastContrast0.15 – 101.1
saturationSaturation0 – 41.2
lightKey light0 – 30.5
rimRim sheen0 – 30.4

Shader parameters — SHDR-10

a lattice of light knitted into the ball's own skin. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.6
scrollClimb0 – 81.2
camDistCamera distance1 – 507
focalLens0.15 – 152
shellRShell radius0.2 – 202.6
wrapWraps around1 – 148
climbBand spacing0.05 – 124
turbWarp0 – 30.35
layerLayer offset0 – 20.5
cellLattice weight0 – 20.45
stepScaleStep scale0.02 – 30.15
hueStepLayer hue0 – 30.4
spreadColour spread0 – 31
envRadiusEnvelope radius0.15 – 202.9
envCoreEnvelope core0.3 – 1.020.92
fillBody fill0 – 400.1
stepClampStep clamp5 – 5000300
scatterDiffusion0 – 0.20.004
exposureExposure0.05 – 50030
contrastContrast0.15 – 151.15
saturationSaturation0 – 41.2
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-11

quantum orbital, rainbow chroma. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.9
rotSpeedRotation speed0 – 50.5
radiusRadius0.15 – 30.9
swellInput swell0 – 10.07
posScaleOrbital zoom0.15 – 100.5
flowSpeedFlow speed0 – 100.35
flowAmpFlow amount0 – 40.45
flowScaleFlow scale0.3 – 100.3
precessPrecession0 – 40.3
radialPowRadial power0.5 – 150.5
radialDecayRadial decay0.3 – 301
probPowProbability curve0.1 – 30.4
probGainProbability gain0.15 – 153
waveFreqWave frequency0 – 204
chromaSpreadChroma spread0 – 1.50.18
glowGlow0 – 50.9
metalDarkMetal darkness0 – 30
baseVisBase visibility0 – 1.50.12

Shader parameters — SHDR-12

a ball of glossy toy bricks, studs up — it rebuilds itself while it thinks. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
spinSpin0 – 50.25
tiltTilt0 – 40.55
rebuildRebuild rate0 – 200.4
gapMissing bricks0 – 0.80.07
studsStuds8 – 4818
radiusRadius0.15 – 30.95
patchColour patches0 – 10.35
studStud relief0 – 10.85
seamSeams0 – 10.6
glossGloss0 – 31
lightKey light0 – 31
gainGain0.05 – 51
contrastContrast0.15 – 101

Shader parameters — SHDR-13

plasma globe: crawling lightning filaments. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 101
spinSpin rate0 – 50.2
camDistCamera distance1 – 507
focalLens0.15 – 152.25
envRadiusGlobe radius0.15 – 152.6
swellInput swell0 – 10.15
tiltAxis tilt0 – 40.4
filsFilament density0.5 – 126
writheWrithe0 – 30.9
writheFreqWrithe frequency0.2 – 81.6
sharpArc sharpness0.5 – 604
softArc core softness0.002 – 0.50.06
whitenCore whitening0 – 0.20.008
coreGainNucleus glow0 – 51.6
tipGainGlass flare0 – 61.8
fillBody haze0 – 20.02
stepClampStep clamp0.3 – 30040
scatterDiffusion0 – 0.50.012
exposureExposure0.1 – 20011
contrastContrast0.15 – 151
saturationSaturation0 – 41.2
alphaGainAlpha gain0.05 – 152.5
edgeEdge sharpness0 – 11

Shader parameters — SHDR-14

a lit plasma dome quantized to chunky two-tone pixels. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedWave speed0.015 – 100.5
spinRoll0 – 50.15
radiusRadius0.15 – 30.9
cellsGrid cells32 – 320140
levelsTone steps2 – 83
scaleWave scale0.3 – 121.5
plasmaWave amount0 – 30.9
lightKey light0 – 30.9
rimRim light0 – 30.35
gainBrightness0.05 – 51
contrastContrast0.15 – 101.1

Shader parameters — SHDR-15

an iridescent particle-track web worn as the ball's skin. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
wanderAxis wander0 – 30.15
camDistCamera distance1 – 507
focalLens0.15 – 152.25
fieldScaleWeb density1 – 202.4
turbWeave0 – 50.8
stepScaleSkin depth0.0015 – 0.40.015
disperseDispersion0 – 51
envRadiusEnvelope radius0.15 – 152.6
envCoreEnvelope core0.3 – 1.021
fillBody fill0 – 1000.3
stepClampStep clamp3 – 5000150
scatterDiffusion0 – 0.50.01
exposureExposure1.5 – 150050
contrastContrast0.15 – 151.35
saturationSaturation0 – 41.35
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-16

sunlight through water — a caustic net crawling over the ball, fringing into colour where it moves. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
flowWater flow0.015 – 100.9
spinTurn0 – 50.08
swellRateSurge rate0 – 80.6
radiusRadius0.15 – 30.9
scaleNet scale3 – 309
warpRipple depth0 – 30.8
edgeLine sharpness0.5 – 102.2
splitColour fringe0 – 30.6
swellSurge depth0 – 10.15
gainSun power0.05 – 61.6
contrastTone knee0.15 – 61.1
lightFloor light0 – 30.9
rimRim sheen0 – 30.6

Shader parameters — SHDR-17

a grainy many-coloured storm with band shear and lightning. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedStorm speed0.015 – 100.9
spinRoll0 – 50.12
radiusRadius0.15 – 30.9
scaleWeather scale0.3 – 122.4
bandsBand count0 – 206
shearBand shear0 – 51.1
warpWarp0 – 82.2
churnChurn0 – 81.4
gainBrightness0.05 – 51.15
contrastContrast0.15 – 101.35
grainField grain0 – 20.4
filmGrainFilm grain0 – 20.35
grainSizeGrain size1 – 82
rainbowIridescence0 – 20.65
flashRateFlash rate0 – 101.6
flashFlash power0 – 51.2
lightKey light0 – 30.85
rimRim light0 – 30.5

Shader parameters — SHDR-18

a crystal folded out of one eighth of space, tumbling. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
wanderTumble0 – 50.5
camDistCamera distance1 – 504
focalLens0.15 – 151.5
foldOctant fold0 – 11
creaseDiagonal crease0 – 11
freqCrystal frequency0.1 – 205
stepScaleStep scale0.02 – 20.3
hueDepth hue0 – 41.5
spreadColour spread0 – 31
envRadiusEnvelope radius0.15 – 152.1
envCoreEnvelope core0.3 – 1.020.9
fillBody fill0 – 200.02
stepClampStep clamp1 – 200040
scatterDiffusion0 – 0.20.004
exposureExposure0.2 – 50018
contrastContrast0.15 – 151.2
saturationSaturation0 – 41.25
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-19

beads swelling and shrinking in their cells, packed over the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
swirlSwirl0 – 30.05
slideDrift0 – 40.1
radiusRadius0.15 – 30.9
scalePacking scale0.3 – 3010
bulgeDome bulge0 – 40.3
growDot size-0.2 – 1.20.185
varySize variation0 – 0.40.13
skewGenerator detune0 – 30.62
jitterDot wander0 – 1.50.1
edgeRim hardness1 – 20050
beadBead shading0 – 10
gainBrightness0.05 – 41
contrastContrast0.15 – 61
saturationSaturation0 – 41.1
floorLevelBody fill0 – 20.06
lightKey light0 – 30.3
rimRim sheen0 – 30.35

Shader parameters — SHDR-20

a water film rushing down the ball, fountain-style. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedRipple speed0.015 – 100.5
flowFall rush0 – 203
camDistCamera distance1 – 507
focalLens0.15 – 152.25
tiltFlow tilt0 – 40.15
stretchFall stretch0.03 – 30.3
foamFoam0 – 30.3
wallFilm sharpness0.15 – 203
stepScaleStep scale0.015 – 1.50.2
hueScaleHue banding0 – 30.85
envRadiusEnvelope radius0.15 – 152.6
envCoreEnvelope core0.3 – 1.021
fillBody fill0 – 1000.4
stepClampStep clamp0.3 – 30020
scatterDiffusion0 – 0.50.01
exposureExposure1.5 – 150022
contrastContrast0.15 – 151.15
saturationSaturation0 – 41.55
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-21

light diffusing through a cloud. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 1010
camDistCamera distance0.5 – 404.4
focalLens0.3 – 151.8
radiusCloud radius0.15 – 102
scaleCloud scale0.1 – 150.8
churnChurn0 – 50.3
thresholdClumping0 – 30.075
edgeSoftEdge softness0.1 – 100.8
densityDensity0.03 – 203.2
absorbAbsorption0.03 – 151.4
shadowAbsorbShadow depth0 – 202.4
shadowLiftShadow lift0 – 50.55
anisoForward scatter-0.9 – 0.90.45
lightSpinLight orbit0 – 30.12
powerLight power0.03 – 401.9
ambientAmbient0 – 30.12
exposureExposure0.03 – 101
alphaGainAlpha gain0.05 – 101.5

Shader parameters — SHDR-22

field lines swirling around the ball about a wandering axis. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 100.5
wanderAxis wander0 – 30.12
camDistCamera distance1 – 507
focalLens0.15 – 152.25
hugSurface hug0 – 30.8
turbCell shimmer0 – 50.6
stepScaleStep scale0.005 – 1.50.07
hueStepStep hue0 – 100.12
hueDepthDepth hue0 – 101.4
glowVector glow0 – 101.4
glowFewGlow density0 – 1.50.12
envRadiusEnvelope radius0.15 – 152.6
envCoreEnvelope core0.3 – 1.020.88
fillBody fill0 – 1000.15
stepClampStep clamp3 – 5000800
scatterDiffusion0 – 0.50.01
exposureExposure1.5 – 5000260
contrastContrast0.15 – 151.3
saturationSaturation0 – 41.15
alphaGainAlpha gain0.05 – 152
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-23

an ASCII glyph matrix in CRT green, wrapped on the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
driftDrift0 – 100.55
scrollScroll0 – 100.05
speedPulse rate0.015 – 100.5
pulsePulse depth0 – 20
spinRoll0 – 50.12
radiusRadius0.15 – 30.9
cellsGlyph grid16 – 12040
scaleField scale0.3 – 101.6
densityGlyph density0 – 20.48
dropoutDropout0 – 10.48
lightKey light0 – 30.6
rimRim glow0 – 30.45
gainPhosphor gain0.05 – 51
contrastContrast0.15 – 101

Shader parameters — SHDR-24

a Minecraft Earth — a perfect voxel sphere whose seasons cycle it through lush, cherry-grove, ice, mesa and desert worlds. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
spinSpin0 – 50.22
tiltTilt0 – 40.45
driftTerrain drift0 – 100.12
seasonSeason rate0 – 100.3
shuffleEmber rate0 – 200.8
radiusRadius0.15 – 31.15
blocksBlocks16 – 9664
roughMountains0 – 0.80.45
scaleTerrain scale0.5 – 82.4
seaSea level0 – 10.5
treesTrees0 – 10.75
caveCaves0 – 10.4
oreOre density0 – 0.60.12
glowOre glow0 – 50.9
coreMolten core0 – 10.5
textureTexture grain0 – 10.6
lightKey light0 – 31
gainGain0.05 – 51
contrastContrast0.15 – 101

Shader parameters — SHDR-25

the folds of a warped field, drawn by their own steepness. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedBoil0.015 – 203
driftDrift0 – 80.6
swirlSwirl0 – 30.05
radiusRadius0.15 – 30.9
scaleCell scale0.3 – 607.5
bulgeDome bulge0 – 40.3
warpFold0 – 20.4
zoomOctave zoom0.6 – 21.111
rippleRipple0.02 – 30.3
edgeGainEdge gain0.5 – 6010
blurRim width0.5 – 122.5
fringeChromatic fringe0 – 1.50.09
exposureExposure0.05 – 400.8
contrastContrast0.15 – 81.15
saturationSaturation0 – 41.5
floorLevelBody fill0 – 20.16
lightKey light0 – 30.35
rimRim sheen0 – 30.45

Shader parameters — SHDR-26

a crazed web of coloured threads knotted to a cell grid. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedBoil0.015 – 100.4
swirlSwirl0 – 30.07
driftCrazing drift0 – 50.18
radiusRadius0.15 – 30.9
scaleCell scale0.3 – 209
bulgeDome bulge0 – 40.25
warpWarp0 – 30.85
poleKnot strength0 – 20.25
poleSoftKnot size0.001 – 10.012
pulseCell breathing0 – 20.35
sharpThread width0.3 – 204.5
splitChromatic split0 – 10.045
coreHot core0 – 30.45
floorBody fill0 – 30.9
gainBrightness0.05 – 51
contrastContrast0.15 – 101.35
lightKey light0 – 30.7
rimRim sheen0 – 30.45

Shader parameters — SHDR-27

a weather-radar mosaic, fronts of coloured pixels sweeping the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedFront speed0.015 – 100.6
spinRoll0 – 50.04
radiusRadius0.15 – 30.9
scaleGrid zoom0.3 – 82.4
cellsGrid8 – 12034
dotDot size0.1 – 0.50.36
swirlSwirl0 – 81.5
vortexVortex size0.1 – 20.45
freqStorm scale0.2 – 81.6
warpBend0 – 30.5
loQuiet threshold0 – 10.12
hiPeak threshold0 – 10.82
curveResponse curve0.5 – 41.4
ditherClass dither0 – 0.60.12
sparseQuiet density0 – 10.16
densityFill0 – 1.51
twinkleTwinkle rate0 – 303
grainPaper grain0 – 10.1
lightKey light0 – 10.18
rimRim0 – 10.35

Shader parameters — SHDR-28

nested binary grids shuttering on a tumbling bit-sphere. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedShutter drift0.015 – 100.5
spinTumble rate0 – 50.15
tiltTumble tilt0 – 40.5
radiusRadius0.1 – 30.9
gridScaleGrid scale0.5 – 202
levelsBit depth4 – 2012
lineWLine width0.5 – 152
shutterShutter0 – 41
gainLine gain0.05 – 101
bodyBody glow0 – 51
rimRim light0 – 50.6
rimPowRim tightness0.3 – 203
contrastContrast0.15 – 101
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-29

an LED tile wall lighting up in flowing blobs, wrapped on the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
driftDrift0 – 100.45
churnChurn0 – 100.5
swirlFluidity0 – 31.2
shuffleShuffle0 – 200.6
pulsePulse depth0 – 20
spinRoll0 – 50.1
radiusRadius0.15 – 30.9
cellsTile grid16 – 16048
scaleBlob scale0.3 – 101.3
coverageCoverage0 – 1.20.52
confettiConfetti0 – 10.22
lightKey light0 – 30.6
gainPanel gain0.05 – 51
contrastContrast0.15 – 101

Shader parameters — SHDR-30

a meadow folding into itself toward a blue vanishing point. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
fallFall speed0 – 40.12
tiltFrame tilt-1.6 – 1.60
driftWeather drift0 – 40.2
radiusRadius0.15 – 30.9
scaleTunnel scale0.3 – 204.5
bulgeDome bulge0 – 40.25
ratioFrame ratio1.1 – 61.8
horizonHorizon-0.9 – 0.90.14
cloudScaleCloud scale0.1 – 81.6
cloudCoverCloud cover0.02 – 0.980.46
streakFreqWall detail0.2 – 205
streakRadSmear0.02 – 40.5
waterWater0 – 10.7
flowerScaleFlower scale2 – 12044
flowerDensityFlower density0 – 10.55
flowerSizeFlower size0.05 – 0.60.26
frameShadeFrame shading0.2 – 1.40.62
hazeAerial haze0 – 10.85
hazeRangeHaze reach0.005 – 1.50.09
gainBrightness0.05 – 41.05
contrastContrast0.15 – 101.05
saturationSaturation0 – 41.1
lightKey light0 – 30.35
rimRim sheen0 – 30.55

Shader parameters — SHDR-31

raymarched shell, volumetric godrays. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedAnim speed0.015 – 101
sweepRateSweep rate0 – 60.5
radiusShell radius0.4 – 102.6
swellInput swell0 – 30.18
warpWarp divisor0.3 – 100.9
warpFreqWarp frequency0.15 – 305.25
warpSwingWarp swing0 – 80
freqSwingFrequency swing0 – 150
smoothSwingSoftness swing0 – 20
smoothKBlend softness0.015 – 40.42
rayGainGodray gain0 – 40.8
rayFalloffGodray falloff0.3 – 10010.5
surfaceLitSurface light0 – 30.105
ambientAmbient0 – 10
alphaGainAlpha gain0.05 – 153
edgeFadeHalo falloff0.1 – 30.45
camDistCamera distance1.5 – 10012
fovLens0.3 – 203.5
stepScaleStep safety0.3 – 309
maxDistMax distance3 – 10022

Shader parameters — SHDR-32

a galaxy marched as gas and dust inside the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
spinDisc turn0 – 30.06
churnGas churn0 – 50.25
beatCore beat0 – 120.8
twinkleTwinkle rate0 – 121.2
camDistCamera distance1 – 507
focalLens0.15 – 152.25
envRadiusEnvelope radius0.15 – 152.6
tiltTilt (0 edge-on)0 – 1.50.85
armsArm count1 – 62
windArm winding0 – 83.4
raggedArm fray0 – 123
armSharpArm sharpness0.3 – 82.2
falloffDisc falloff0.3 – 121.7
thickDisc thickness0.01 – 10.035
bulgeCore tightness2 – 20040
coreCore density0 – 205
turbScaleTurbulence scale0.5 – 309
thresholdClumping0 – 10.35
densityGas density0.1 – 4014
absorbDust absorption0 – 203.5
starsStars0 – 101.2
starDensityStar density0 – 10.5
starScaleStar scale5 – 20048
hueReachHue reach0.15 – 1.50.6
pulseBeat depth0 – 30.2
breatheDisc breathing0 – 20
exposureExposure0.05 – 501.1
contrastContrast0.15 – 61.15
saturationSaturation0 – 41.35
alphaGainAlpha gain0.05 – 152
fillNight fill0 – 10.85
rimRim light0 – 30.35
edgeEdge sharpness0 – 11
edgeFadeHalo falloff0.1 – 30.98

Shader parameters — SHDR-33

a thermal image, risograph-printed on the ball. Pass any subset through params; anything you leave out follows the active state's preset.

KeyLabelRangeDefault
speedDrift0.015 – 100.5
spinRoll0 – 50.05
radiusRadius0.15 – 30.9
scaleZoom0.3 – 83
freqPool scale0.2 – 61.4
warpWarp0 – 30.6
loCold threshold0 – 10.42
hiHot threshold0 – 10.74
gainHeat gain0.1 – 61
jitterHeat jitter0 – 0.50.015
bandsContour bands2 – 247
bandingContour strength0 – 10.85
contrastContrast0.3 – 31
ditherDither0 – 0.60.05
dotsScreen pitch4 – 12046
dotGainDot gain0.2 – 21
dotSoftDot softness0.01 – 0.30.12
misregisterMisregistration0 – 30.5
inkInk density0 – 10.92
printMixPrint mix0 – 10.28
grainPaper grain0 – 20.35
grainSizeGrain size1 – 82
lightKey light0 – 10.25
rimRim light0 – 30.25

Performance

Each orb owns one WebGL context, and browsers cap the number of live contexts (commonly around 16). A page with many orbs is fine because they pause offscreen, but if you need dozens visible at once, render them at a smaller size and consider lowering maxDpr to 1.

npx shadcn@latest add zzzzshawn/orbkit/all