A dark sphere with two colored crescent lights in three set-ups: cyan and coral opposing, violet and rose adjacent, or a sharp cyan rim with a soft fill. Size takes pixels or any CSS length.
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/orb-crescentnpx shadcn add @01orbital/orb-crescentyarn shadcn add @01orbital/orb-crescentbunx --bun shadcn add @01orbital/orb-crescentPart 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/orb-crescent.tsx, as source you own and edit.
import { OrbCrescent } from "@/components/orbs/orb-crescent"
export default function OrbCrescentDemo() {
return (
<div className="dark relative isolate grid min-h-full w-full flex-1 grid-cols-1 place-items-center gap-12 overflow-hidden bg-background py-12 text-foreground sm:grid-cols-3">
{(["opposing", "adjacent", "rim-fill"] as const).map((variant) => (
<div key={variant} className="grid justify-items-center gap-4">
<OrbCrescent variant={variant} size={200} />
<p className="text-sm text-muted-foreground">{variant}</p>
</div>
))}
</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.
Neon Orb
An SVG neon tube ring with blacked-out electrode ends in five gas or phosphor colors. It can switch off to pale daylight glass or sputter like a failing tube, stilled under reduced motion; also exports a bloom ring.
Orb Palettes
Nine named colorways for the orbs: scarlet over cobalt, ember, umber, tide, dusk, viridian with a gold seam, rose, gold and ash. Plain data; pass a name as palette to the Voice Orb, the Planet or the docked chat.