A dark sphere lit by three colored lights, a coral key, magenta fill and purple rim, drawn with SVG inset filters and outer glows. A key, fill and rim palette recolors it without moving the geometry.
The source comes with full access.
One payment of $149 ($49 for now) opens the source right here and lets the CLI install every paid component, with lifetime updates.
pnpm dlx shadcn add @01orbital/multicolor-orbnpx shadcn add @01orbital/multicolor-orbyarn shadcn add @01orbital/multicolor-orbbunx --bun shadcn add @01orbital/multicolor-orbPart of the 01orbital library. With a license, put ORBITAL_TOKEN in .env.local and the same command installs it (licensed install, pricing).
It lands at components/orbs/multicolor-orb.tsx, as source you own and edit.
import { MulticolorOrb } from "@/components/orbs/multicolor-orb"
// The palette is the knob: key light, fill and rim.
const PALETTE = {
key: "oklch(0.905 0.040 251.6)",
fill: "oklch(0.450 0.155 251.6)",
rim: "oklch(0.840 0.075 251.6)",
} as const
export default function MulticolorOrbDemo() {
return (
<div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
<MulticolorOrb palette={PALETTE} />
</div>
)
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
No other registry pieces.
Moon Sphere
A single-element sphere lit on one limb: a radial gradient from the lower-left corner runs transparent out to a warm rim color on the far edge. Used for moonrise effects over dark grounds.
Neon Disc
A neon tube ring with its electrode gap masked out, plus an inner glow, outward throw and soft halo all derived from one tube color. It reads on light paper as well as on dark grounds.