A single-element sphere lit on one limb: a radial gradient from the lower-left corner runs transparent out to a warm rim color on the far edge. Used for moonrise effects over dark grounds.
import { cn } from "cn"
/**
* A sphere lit only on one limb, for a moon rising over a dark ground. A
* radial gradient from the lower-left corner runs transparent out to
* `moonColor` at the upper-right edge, so the rest of the disc shows the
* ground behind it. It is decorative and hidden from assistive tech.
*/
function MoonSphere({
className,
size = 256,
moonColor = "oklch(0.65 0.12 55)",
style,
...props
}: React.ComponentProps<"div"> & {
/** Diameter in px. */
size?: number
/** The rim light's color. */
moonColor?: string
}) {
return (
<div
aria-hidden="true"
data-slot="moon-sphere"
className={cn("rounded-full", className)}
style={{
width: size,
height: size,
background: `radial-gradient(circle at 0% 100%, transparent 60%, ${moonColor} 100%)`,
...style,
}}
{...props}
/>
)
}
export { MoonSphere }
pnpm dlx shadcn add @01orbital/moon-spherenpx shadcn add @01orbital/moon-sphereyarn shadcn add @01orbital/moon-spherebunx --bun shadcn add @01orbital/moon-sphereFree under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/orbs/moon-sphere.tsx, as source you own and edit.
import { MoonSphere } from "@/components/orbs/moon-sphere"
// The default warm rim, and the same sphere with moonColor set.
export default function MoonSphereDemo() {
return (
<div className="flex flex-wrap items-center justify-center gap-16">
<MoonSphere size={320} />
<MoonSphere size={320} moonColor="oklch(0.72 0.11 232)" />
</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.
Living Orb
An Orbital V4 orb with optional motion: a breathing scale and opacity pulse, animated film grain, or both. Grain runs only at 120px and up, and all motion stops under reduced motion. Uses Grain.
Multicolor Orb
A dark sphere lit by three colored lights, a coral key, magenta fill and purple rim, drawn with SVG inset filters and outer glows. A key, fill and rim palette recolors it without moving the geometry.