Dust Motes — React Animated Background

Dust motes drifting through slanted Tyndall light beams — parallel volumetric shafts whose width and brightness breathe with fbm, over a shadowed room.

View source

Starting live preview

Usage

import { DustMotes, DUST_MOTES_PRESETS } from "@/components/DustMotes";

export function AtticHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <DustMotes {...DUST_MOTES_PRESETS.attic}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          motes: 1,
          beams: 3,
          beamWidth: 0.16,
          to: "#e8d9b5",
          accent: "#fffbe8"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Quiet air, bright motes</h1>
      </div>
    </section>
  );
}

Implementation notes & API

Purpose: atmospheric room backdrop — two mote layers ride a lazy flow field, brighten inside the beams and all but vanish in the shadowed room beyond. Mount: full-bleed layer behind content; the room is opaque near-black. Props: speed, intensity, motes (count multiplier), beams (shaft count), beamWidth, drift, from/to/accent (room, shaft, mote colors). Pointer: interactive is off by default; set it and the cursor is a draft of air that carries the motes. Guardrails: WebGPU required with fallback prop; reduced motion stills the air; the whole shaft set slowly sweeps on its own.

Property	Type	Notes / default
`interactive`	`boolean`	false in the library; enabled in this preview
`fallback`	`ReactNode`	Shown when the renderer is unavailable
`className / style`	`string / CSSProperties`	Applied to the outer container

View source on GitHubFree for commercial projects · MIT