A full-bleed art layer that centres a Painted Orb Rim sphere on a near-black ground, to sit behind content inside a relative parent. The ground can be turned off to layer it over another scene.
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-orb-rim-scenenpx shadcn add @01orbital/painted-orb-rim-sceneyarn shadcn add @01orbital/painted-orb-rim-scenebunx --bun shadcn add @01orbital/painted-orb-rim-scenePart 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-rim-scene.tsx, as source you own and edit.
import PaintedOrbRimScene from "@/components/orbs/painted-orb-rim-scene"
export default function Example() {
return <PaintedOrbRimScene />
}Prop
Type
It also accepts the HTML attributes of the element it renders.
npm: cn. The CLI installs them for you.
Registry pieces it installs with it:
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.
Planet
A colored sphere: two stacked color fields, blurred and wrapped into a ball by a vignette, lit from the top. Takes any of the nine Orb Palettes by name, or your own. Holds its form from 16px to 400px; circle or squircle, for marks, app icons and favicons.