A large painted sphere filled with any CSS gradient, warm amber by default, under two noise grain layers with a lit lower limb and outer glow. Glow intensity scales down to a bare limb line.
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/painted-orbnpx shadcn add @01orbital/painted-orbyarn shadcn add @01orbital/painted-orbbunx --bun shadcn add @01orbital/painted-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/painted-orb.tsx, as source you own and edit.
import { PaintedOrb } from "@/components/orbs/painted-orb"
// The gradient is the knob: swap it to retint.
const GRADIENT =
"linear-gradient(155deg in srgb, oklch(0.792 0.078 31.8) 0%, oklch(0.671 0.117 28.4) 36%, oklch(0.502 0.051 195.7) 70%, oklch(0.245 0.039 264.4) 100%)"
export default function PaintedOrbDemo() {
return (
<div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background text-foreground">
<PaintedOrb
size={280}
gradient={GRADIENT}
limbColor="oklch(1 0 0 / 0.16)"
glowIntensity={0}
aria-hidden="true"
/>
</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.
Orbital V6
Orbital with extended lighting: adds three-point and eclipse form tiers to the classic shading, with quiet, cinematic and theatrical presets and eleven knobs. Derived lights need OKLCH palette colors.
Painted Orb Rim
A near-black sphere with a cyan key rim and a warm coral fill on opposite edges, built from layered box shadows. A palette or OKLCH color overrides reskin both lights without moving the geometry.