An evenly lit sphere with two capsule eyes that follow the pointer — white, black, webgl, and custom variants.

A still orb. Two pill eyes ride the curve and look at the cursor. The ball is fully lit — no shade, rim, or highlight. White is the default. Black inverts it. WebGL keeps the same face on an unlit color wash. Custom takes your hex.

Live Orb

Props

Variant

Size

280

Interactive

Eyes follow the pointer

Blink

Occasional blink

Installation

pnpm dlx shadcn@latest add @23rd/live-orb

Or install straight from the public GitHub source registry:

pnpm dlx shadcn@latest add radiumcoders/23rd.dev/live-orb

Usage

"use client"

import { LiveOrb } from "@/components/ui/live-orb"

export function Mascot() {
  return <LiveOrb />
}

Named variants set the fill. custom reads color and eyeColor. webgl can take an optional three-stop colors palette.

<LiveOrb variant="white" />
<LiveOrb variant="black" />
<LiveOrb variant="webgl" />
<LiveOrb variant="webgl" colors={["#7C6AF7", "#7DD3C7", "#E8B4D4"]} />
<LiveOrb variant="custom" color="#7C5CFF" eyeColor="#FAFAFA" />

The orb does not follow the pointer — only the eyes do. Pass interactive={false} to park the gaze.

Props

Prop	Type	Default
`variant`	`"white" \| "black" \| "webgl" \| "custom"`	`"white"`
`size`	`number`	`280`
`color`	`string`	`"#7C5CFF"`
`eyeColor`	`string`	`"#FAFAFA"`
`colors`	`string[]`	violet / foam / dust-rose
`interactive`	`boolean`	`true`
`blink`	`boolean`	`true`
`className`	`string`	React only
`class`	`string`	Svelte only

color and eyeColor apply only when variant="custom". colors applies only when variant="webgl".