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.
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/planetnpx shadcn add @01orbital/planetyarn shadcn add @01orbital/planetbunx --bun shadcn add @01orbital/planetPart 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/planet.tsx, as source you own and edit.
import {
ORB_PALETTE_NOTES,
ORB_PALETTES,
type OrbPaletteName,
} from "@/components/orbs/orb-palettes"
import { Planet } from "@/components/orbs/planet"
// The nine colorways, each on the Planet, named.
export default function Demo() {
return (
<ul className="grid w-full max-w-3xl grid-cols-3 gap-x-6 gap-y-8 p-6 sm:grid-cols-5">
{(Object.keys(ORB_PALETTES) as OrbPaletteName[]).map((name) => (
<li key={name} className="flex flex-col items-center gap-3 text-center">
<Planet palette={name} size={72} />
<div className="flex flex-col">
<span className="font-mono text-xs/4 tracking-widest uppercase">
{name}
</span>
<span className="text-xs/4 text-muted-foreground">
{ORB_PALETTE_NOTES[name]}
</span>
</div>
</li>
))}
</ul>
)
}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 Scene
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.
Rising Orb
A half-dome orb: the top half of a disc in a warm gradient with a glowing limb border, on a transparent ground. Children render between the paint and the limb, and the composition crops it at a horizon.