A pale modelled sphere for light surfaces that blooms to an accent color with a slight lift on hover, its own or its parent group's. The shadow stack derives from the body and shade colors.
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/bloom-orbnpx shadcn add @01orbital/bloom-orbyarn shadcn add @01orbital/bloom-orbbunx --bun shadcn add @01orbital/bloom-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/bloom-orb.tsx, as source you own and edit.
import { BloomOrb } from "@/components/orbs/bloom-orb"
// Its own ground: a pale sphere blooming onto a pale surface is the whole
// effect. On a dark ground it flattens into a white disc.
export default function BloomOrbDemo() {
return (
<div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background py-24 text-foreground [background:oklch(0.97_0.004_90)]">
<BloomOrb size={300} />
</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.
Black Hole Orb
A black hole painted in CSS gradients: a tilted accretion disk, lensed photon rings and a black shadow, with Doppler beaming dimming the receding side. Tilt, thickness, reach and palette adjust.
Cloudy Nimbus Coral
A disc of baked cloudy paint in a coral palette under an overlay grain tile, for avatars or spot art. Below 48px it drops the grain and raises contrast and saturation so the clouds still read.