Plasma Sheet — React Animated Background

Molten color currents folding through each other — two chained domain warps advect and fold the field so colors stir like dense dye, with filament highlights on the fold edges.

View source

Starting live preview

Usage

import { PlasmaSheet, PLASMA_SHEET_PRESETS } from "@/components/PlasmaSheet";

export function PlasmaHero() {
  return (
    <section style={{ position: "relative", minHeight: "100dvh" }}>
      <PlasmaSheet {...PLASMA_SHEET_PRESETS.nebula}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          scale: 2.2,
          warp: 1.8,
          from: "#120b26",
          to: "#7b2ff7",
          accent: "#22d3ee"
        }}
      />
      <div style={{ position: "relative", zIndex: 1, padding: "8rem 2rem" }}>
        <h1>Stir the color</h1>
      </div>
    </section>
  );
}

Implementation notes & API

Purpose: vivid flowing-gradient backdrop (value-noise fbm warped by fbm — the classic fluid technique); an electric rim picks out the fold edges. Mount: full-bleed layer behind content; the sheet is opaque. Props: speed, intensity, scale (blob size), warp (fold strength), from/to/accent (base, current, rim colors). Pointer: interactive is off by default; set it and the cursor injects a vortex-like swirl into the current. Guardrails: WebGPU required with fallback prop; reduced motion holds one stirred frame; keep one dark tone for text contrast.

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