Skip to Content
Get full access

Cloudy Nimbus

Cloudy painted orb: a round disc of soft painted texture under film grain, in coral, lilac or moss. Pick the painting with palette; below 48px it adds a rim so a small avatar or step marker still reads.

pnpm dlx shadcn add @01orbital/cloudy-nimbus

Usage

import { CloudyNimbus } from "@/components/orbs/cloudy-nimbus"

export default function CloudyNimbusDemo() {
  return (
    <div className="relative isolate grid min-h-full w-full flex-1 place-items-center overflow-hidden bg-background py-24 text-foreground">
      <CloudyNimbus size={200} />
    </div>
  )
}

Examples

New

cloudy-nimbus-coral

cloudy-nimbus-coral

Coral

Cloudy Nimbus example: the coral painting at 200px.

pnpm dlx shadcn add @01orbital/cloudy-nimbus-coral

New

cloudy-nimbus-lilac

cloudy-nimbus-lilac

Lilac

Cloudy Nimbus example: the lilac painting at 200px.

pnpm dlx shadcn add @01orbital/cloudy-nimbus-lilac

New

cloudy-nimbus-moss

cloudy-nimbus-moss

Moss

Cloudy Nimbus example: the moss painting at 200px.

pnpm dlx shadcn add @01orbital/cloudy-nimbus-moss

API reference

A round disc of cloudy painted texture, baked into the file as an image, with film grain over it. Pick the painting with palette: coral (the default), lilac or moss. Each is a fixed painting, so the palette picks one rather than recoloring it. It is decorative and hidden from assistive tech.

Below 48px it drops the grain and adds an inset rim and extra contrast, so the disc still reads. The recommended minimum is 20px.

Prop

Type

It also accepts the HTML attributes of the element it renders.

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.

Black Hole Orb

Bloom Orb

Felt Orb

Fish Orb Bowl

Fish Orb Rim

Key Light Orb