Ember Drift — React Animated Background

Sparks rising from a bed of coals, cooling from gold to red through shimmering heat — two cell-hashed ember layers under an fbm thermal warp.

View source

Starting live preview

Usage

import { EmberDrift, EMBER_DRIFT_PRESETS } from "@/components/EmberDrift";

export function HearthHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <EmberDrift {...EMBER_DRIFT_PRESETS.campfire}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          embers: 1,
          from: "#ffb45e",
          to: "#c22b0f"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Keep the fire going</h1>
      </div>
    </section>
  );
}

Implementation notes & API

Purpose: warm ambient backdrop of rising sparks over a charcoal bed; the lower third is bent by heat shimmer (fbm refraction). Mount: full-bleed layer behind content; opaque near-black base — no background needed behind it. Props: speed, intensity, embers (count multiplier), rise (ascent speed), shimmer (heat refraction), from/to (fresh/cool spark colors). Pointer: interactive is off by default — sparks rise straight up; set it and the pointer blows a sideways wind that leans the plume. Guardrails: WebGPU required with fallback prop; reduced motion freezes time; designed for dark themes.

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