Live Orb
A flat-lit sphere with two pill eyes that follow the pointer.
Preview
Installation
pnpm dlx shadcn@latest add @23rd/live-orbOr from the public GitHub registry:
pnpm dlx shadcn@latest add radiumcoders/23rd.dev/live-orbUsage
"use client"
import { LiveOrb } from "@/components/ui/live-orb"
export function Mascot() {
return <LiveOrb />
}custom uses color and eyeColor; webgl takes an optional three-stop colors.
<LiveOrb variant="white" />
<LiveOrb variant="black" />
<LiveOrb variant="webgl" />
<LiveOrb variant="webgl" colors={["#7C6AF7", "#7DD3C7", "#E8B4D4"]} />
<LiveOrb variant="custom" color="#7C5CFF" eyeColor="#FAFAFA" />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 |