Cloud Particles

1"use client";
2 
3import { ComponentPropsWithoutRef, useEffect, useId, useState } from "react";
4 
5// @interlace/cloud-particles v1.1.0 — Interlace design system.
6// Docs, props and live preview: https://ds.interlace.tools/c/cloud-particles
7// What changed since: https://ds.interlace.tools/c/cloud-particles#history
8// Generated banner — keep it, the upgrade diff reads this version.
9 
10/**
11 * @interlace/ui — CloudParticles
12 *
13 * Volumetric drifting clouds as a decorative backdrop. Each cloud is a
14 * radial-gradient ellipse pushed through a five-pass SVG turbulence filter —
15 * body, cool underside, soft shadow, deep shadow — and translated across
16 * `130vw`.
17 *
18 * It is an `absolute inset-0` overlay: `aria-hidden`, `pointer-events-none`,
19 * and reserving no flow space, so the consumer owns the positioned ancestor.
20 *
21 * ## Provenance
22 *
23 * No MUI or shadcn analogue exists for an atmospheric layer, so the shape
24 * follows the local `aceternity/` convention (`StarsBackground`, `Meteors`).
25 * Against the effect this was adapted from, what is ours: every `floodColor`
26 * is a prop defaulting to a CSS custom property instead of a baked `rgb()`
27 * literal; the filter id comes from `useId()` rather than one global id that
28 * two mounted instances would collide on; and the reduced-motion frame below.
29 *
30 * ## Anatomy
31 *
32 *   CloudParticles                   (div — data-slot="cloud-particles",
33 *                                     aria-hidden, pointer-events-none)
34 *     ├─ style                       (per-instance `{filterId}-drift` keyframe)
35 *     ├─ svg                         (data-slot="cloud-particles-filter" —
36 *     │                               2× feTurbulence, then 4 displaced layers
37 *     │                               composited through feMerge)
38 *     └─ div ×count                  (data-slot="cloud-particles-cloud")
39 *         └─ div                     (data-slot="cloud-particles-shape")
40 *
41 * Layout is a deterministic golden-ratio walk (`buildClouds`), not
42 * `Math.random()`, so server and client agree and the same props always
43 * produce the same field. `count` is clamped to `mobileCount` below
44 * `mobileBreakpoint`. Both the keyframe and the clouds render only after
45 * mount, so SSR emits the filter and nothing else.
46 *
47 * ## Motion
48 *
49 * A CSS keyframe, gated three ways. The drift class is written
50 * `motion-safe:animate-[var(--cloud-animation)]` and is only added when
51// … truncated