Orb

A configurable WebGL2 orb — a lit sphere with colour marbling inside it, mixed in OkLab, on a loop with no seam.

Installation

npx smoothui-cli add orb

Features

Sphere impostor with seamless OkLab colour marbling, nested domain warp, and twenty-two tuning props. Pauses off-screen and respects reduced motion.

Variants

Scroll the presets below — the panel shows one finished orb at a time.

Bloom

Magenta against white. The lightness gap is what makes the marbling visible at all.

Glass

Four stops and a hard rim. Iridescence rotates the hue toward the edge, the way a bubble does.

Ember

Lit from within rather than from the side, so it reads as a lamp instead of a ball.

Drop

Wobble deforms the silhouette and the halo spills past it. A liquid drop, not a sphere.

Why it does not look like a gradient circle

A radial gradient has no surface, so light cannot behave like light on it: there is no side turned away, no edge catching the sky, and no highlight that stays put while the colour moves underneath. Deriving a normal costs one sqrt per pixel and buys all three.

The second half is the loop. Offsetting the whole noise domain by one shared vector gives you a pulse — everything moves the same way at once. Giving every point its own circle, with neighbours starting at different angles, is what reads as swirling.

Accessibility

ARIA Attributes

Screen Reader

Nothing is announced. Where the orb stands for a state — an assistant listening, a job running — put that state in text beside it. It should never be the only carrier of the meaning.

Reduced Motion

Respects prefers-reduced-motion: one frame is drawn and no loop starts. The preference is watched live, so toggling it at the OS level takes effect without a reload.

Props

Tuning

Used by

ai-orb-face renders its body with this component, so anything you can tune here you can pass through to the character.