Three layers of shaded clouds, lit on top and tinted underneath, drifting at different speeds over a sky with a low sun glow. Comes in dusk, night and day.
Fall asleep in twelve minutes
npx shadcn@latest add https://hyperblur.dev/r/bg-soft-clouds.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-soft-clouds.tsx.
import { BgSoftClouds } from "@/components/hyperblur/bg-soft-clouds"
<div className="relative h-96"><BgSoftClouds time="dusk"><h1>Sleep better</h1></BgSoftClouds></div>| Prop | Type | Default | Description |
|---|---|---|---|
| time | "dusk" | "night" | "day" | "dusk" | Sky palette and cloud lighting. |
| accent | string | Overrides the color of the sun glow. | |
| density | number | 1 | Cloud count multiplier per layer. |
| speed | number | 1 | Speed of the drift. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |