The Cloudy Nimbus disc in lilac: a pre-rendered cloud painting clipped to a circle with overlay grain. Baked at 384px, so keep it at or under that size; small discs switch to a crisper, grainless look.
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/cloudy-nimbus-lilacnpx shadcn add @01orbital/cloudy-nimbus-lilacyarn shadcn add @01orbital/cloudy-nimbus-lilacbunx --bun shadcn add @01orbital/cloudy-nimbus-lilacPart 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/cloudy-nimbus-lilac.tsx, as source you own and edit.
import { CloudyNimbusLilac } from "@/components/orbs/cloudy-nimbus-lilac"
export default function CloudyNimbusLilacDemo() {
return (
<div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background py-24 text-foreground">
<CloudyNimbusLilac size={200} />
</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.
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.
Cloudy Nimbus Moss
The Cloudy Nimbus disc in a moss palette, baked at 512px for larger placements such as heroes and cards. Grain overlays the paint from 48px up; smaller discs trade it for a half-pixel inner rim.