A sphere's day and night line drawn with masked ellipses: phase sets the lit fraction over regolith, ocean or cloud surfaces. Optional twilight spread, atmospheric rim, city lights, airglow and earthshine.
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/terminator-orbnpx shadcn add @01orbital/terminator-orbyarn shadcn add @01orbital/terminator-orbbunx --bun shadcn add @01orbital/terminator-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/terminator-orb.tsx, as source you own and edit.
import {
Terminator,
type TerminatorPalette,
} from "@/components/orbs/terminator-orb"
// The regolith palette, gibbous and airless; phase turns the terminator.
const PALETTE = {
peak: "oklch(0.944 0.017 84.6)",
mid: "oklch(0.741 0.022 81.8)",
low: "oklch(0.499 0.017 80.6)",
edge: "oklch(0.258 0.007 67.5)",
night: "oklch(0.146 0.004 285.9)",
shine: "oklch(0.439 0.031 266.3)",
} satisfies TerminatorPalette
export default function TerminatorOrbDemo() {
return (
<Terminator size={280} phase={42} surface="regolith" 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.
Shadow Orb
A pale ceramic sphere for light surfaces with a soft highlight, inner shading and a blurred contact shadow beneath it. A three-color palette sets the base, highlight and shadow tones.
Compare
Every Card component side by side: whether it follows the theme or stays dark, how many parts and custom props it has, and whether it is free. Open one for its preview, API and install.