A near-black sphere lit by one dominant cyan key light from the lower right, drawn with SVG inset filters and a cast glow. A key, fill and rim palette reskins it, and fog mode softens the edge into a halo.
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/key-light-orbnpx shadcn add @01orbital/key-light-orbyarn shadcn add @01orbital/key-light-orbbunx --bun shadcn add @01orbital/key-light-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/key-light-orb.tsx, as source you own and edit.
import { KeyLightOrb } from "@/components/orbs/key-light-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 KeyLightOrbDemo() {
return <KeyLightOrb palette={PALETTE} />
}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.
Felt Orb
A teal domed glow on dark felt with coarse and fine grain layers, sized as a section background. Dome opacity acts as the darkness dial, and an optional vignette dissolves the edges for footers and CTAs.
Limned Orb
A flat eclipse silhouette: a dark disc edged by a razor rim light and a soft corona, with grain dithering the falloff. The light angle can turn at the large breakpoint so one orb serves a transposed layout.