Cloud Particles

Preview

Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.

Install

Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.

npx shadcn@latest add https://ds.interlace.tools/r/cloud-particles.json

npx shadcn@latest add @interlace/cloud-particles

Import

Single named export.

import { CloudParticles } from '@/components/ui/aceternity/cloud-particles';

Anatomy

Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.

CloudParticles                   (div — data-slot="cloud-particles",
                                    aria-hidden, pointer-events-none)
    ├─ style                       (per-instance `{filterId}-drift` keyframe)
    ├─ svg                         (data-slot="cloud-particles-filter" —
    │                               2× feTurbulence, then 4 displaced layers
    │                               composited through feMerge)
    └─ div ×count                  (data-slot="cloud-particles-cloud")
        └─ div                     (data-slot="cloud-particles-shape")
Layout is a deterministic golden-ratio walk (`buildClouds`), not
`Math.random()`, so server and client agree and the same props always
produce the same field. `count` is clamped to `mobileCount` below
`mobileBreakpoint`. Both the keyframe and the clouds render only after
mount, so SSR emits the filter and nothing else.

API reference

Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.

Accessibility

Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.

What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.

Focus + keyboard behaviour

Native element semantics — no interaction layer to get wrong.

Focus ring (WCAG 2.2 SC 2.4.13)

Not focusable — no focus indicator required.

Reduced motion

Animation is gated on prefers-reduced-motion.

ARIA in the source

None — semantics come from the element or the Base UI primitive rather than hand-written ARIA.

Examples

3 more states from the same story file.

Dependencies

Base UI primitive

Native / no Base UI dependency

Lucide icons

none

NPM dependencies

none

Registry dependencies

• @interlace/theme
• @interlace/cn
• @interlace/use-reduced-motion

Source

The full implementation — components/ui/aceternity/cloud-particles.tsx once installed.

"use client";

import { ComponentPropsWithoutRef, useEffect, useId, useState } from "react";

// @interlace/cloud-particles v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/cloud-particles
// What changed since: https://ds.interlace.tools/c/cloud-particles#history
// Generated banner — keep it, the upgrade diff reads this version.

/**
 * @interlace/ui — CloudParticles
 *
 * Volumetric drifting clouds as a decorative backdrop. Each cloud is a
 * radial-gradient ellipse pushed through a five-pass SVG turbulence filter —
 * body, cool underside, soft shadow, deep shadow — and translated across
 * `130vw`.
 *
 * It is an `absolute inset-0` overlay: `aria-hidden`, `pointer-events-none`,
 * and reserving no flow space, so the consumer owns the positioned ancestor.
 *

…449 more lines…

Registry JSON

The raw registry record — what the shadcn CLI fetches.