GitHub - paradise-runner/background-clouds: an ambient relaxing set of background clouds to float lazily by

background-clouds adds a lightweight, animated low-poly cloud bank behind a website. It uses a single canvas, has no runtime dependencies, pauses motion when the user prefers reduced motion, and exposes lifecycle methods for single-page apps.

Install npm install background-clouds Use import { createCloudBackground } from "background-clouds";

const clouds = createCloudBackground({ canvas: document.querySelector("#background-clouds"), seed: "my-site", speed: 0.8, opacity: 0.9 });

// Later, for example when unmounting a route: clouds.destroy(); <canvas id="background-clouds" aria-hidden="true"></canvas> #background-clouds { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; } The canvas must be available before calling createCloudBackground. The returned controller has start(), stop(), resize(), setSeed(seed), and destroy() methods. seed may be a string or number; using the same seed produces the same cloud layout. speed and opacity default to 1 and accept non-negative numbers. Options

Option Default Description

canvas required The <canvas> element to render into.

seed random A stable string or number for deterministic cloud placement.

speed 1 Drift multiplier. Set to 0 for still clouds.

opacity 1 Overall cloud opacity multiplier.

pixelRatio 2 Maximum device-pixel ratio used for rendering.

reducedMotion media query Set explicitly to override prefers-reduced-motion.

The package owns only the canvas pixels. Set the canvas’s stacking order, background color, and positioning in your site CSS.