Docs·Cloud Background

Cloud Background

A soft, procedural cloud field with configurable sky colors, motion speed, and automatic off-screen pausing.

Installation

$pnpm dlx shadcn@latest add @spiderui/cloud-background

Usage

Give the parent an explicit height. The canvas fills that container and pauses automatically when it leaves the viewport.

API Reference

PropTypeDefault
colorBottomBase sky color beneath the cloud layers.
string"#87ceeb"
colorMidColor used for the softer middle cloud band.
string"#f8f8f8"
colorTopHighlight color used for the brightest clouds.
string"#ffffff"
speedMultiplier for wind and cloud morphing speed.
number1
heightCSS height of the background container.
string | number"100%"
pausedRender a still frame without running the animation loop.
booleanfalse
childrenOptional content rendered above the canvas.
React.ReactNode—
classNameAdditional classes for the root container.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x
import { CloudBackground } from "@/components/ui/cloud-background"
export function Demo() {
  return (
    <div className="h-[420px] overflow-hidden rounded-3xl">
      <CloudBackground
        colorBottom="#87ceeb"
        colorMid="#f8f8f8"
        colorTop="#ffffff"
        speed={1}
      />
    </div>
  )
}