Chroma Flow — React Animated Background

Four-edge liquid color field on a midnight base — the palette sloshes from the edges in whichever direction the cursor sweeps. Original vfx-ui design.

View source

Starting live preview

Usage

import { ChromaFlow, CHROMA_FLOW_PRESETS } from "@/components/ChromaFlow";

export function ChromaHero() {
  return (
    <div style={{ position: "relative", width: "100%", height: 420 }}>
      <ChromaFlow {...CHROMA_FLOW_PRESETS.classic}
        {...{
          interactive: true,
          speed: 1,
          intensity: 1,
          radius: 0.45,
          momentum: 16,
          ambient: 0.55,
          baseColor: "#071021",
          upColor: "#1d4ed8",
          downColor: "#cbd5e1",
          leftColor: "#0ea5e9",
          rightColor: "#f59e0b"
        }}
      />
    </div>
  );
}

Implementation notes & API

Purpose: full-bleed living color backdrop — base gradient with top/bottom/left/right edge colors that bleed inward; an original vfx-ui implementation (fbm-noise bleed boundaries + pointer velocity), not a port of any third-party code. Mount: full-bleed hero band (100% x 420px+); opaque base — no background needed behind it. Props: speed (ambient drift), intensity, radius (how far edges bleed), momentum (sweep sensitivity), ambient (resting bleed 0..1), baseColor/upColor/downColor/leftColor/rightColor. Pointer: interactive is off by default (calm ambient slosh, pointer-independent); set interactive to flood edge colors toward the cursor's sweep direction — the effect self-decays as the pointer settles. Guardrails: velocity is per-frame eased delta so it never gets stuck; pActive gates the glow pocket; WebGPU required with fallback prop.

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