Distinctive visual

Orb

components/ui/orb

A sphere that steers its highlight and answers with its sound.

Move across it, then press

Craft notes

The gloss highlight leans toward the pointer, up to a fifth of the orb's width
Each press plays its sound, brightens the sphere and sends a ring out
Hue is one number on the oklch wheel, so every sound can have its own color

Play it

Move slowly across the orb to steer the highlight, then press it.

Sounds: any sound

Variants

Every prop combination the component supports. The chip on each card is the exact props it passes.

Hue
hue={150}
One number sets the color.
Surfaces
surface="gloss" | "matte" | "glass"
Gloss with drifting color, matte, and glass.
Floating
float
Drifts a few pixels while idle; holds still for reduced motion.
Paired
onPlay={() => partner.play()}
Press the first orb and its partner answers.