Chroma Flow

Vertical neon streaks flowing through a curl field, painted with a multi-stop rainbow gradient — sharpened peaks, soft bloom, and a black-hole cursor that bends streaks into orbit. Pauses when off-screen.

chroma-flow
Lazy-ui
Move the cursor — streaks orbit

Backgrounds that
bend with you.

Vertical streaks ride a curl field, painted with a rainbow gradient. The cursor bends them into orbit around a ring — accretion disk, not hot point.

0px

Customize

Edit props; preview updates instantly.

Customize
Palette
Speed
0.50x
Density
13
Flow
1.00
Glow
0.55
Vignette
0.55
Grain
0.040
Mouse pulse
0.50

Props

Props accepted by ChromaFlow.

PropTypeDefaultDescription
childrenReactNode—Content rendered above the canvas. Wrapped in `relative z-10 h-full w-full` so centered layouts resolve.
palette"sunset" | "electric" | "aurora" | "ocean" | "void" | "silver""sunset"Color preset for the vertical rainbow gradient. Sampled top-to-bottom: index 0 sits at the top of the canvas, last stop at the bottom.
colorsstring[]—Custom rainbow stops (2–6 entries). Accepts hex, `rgb()`/`rgba()`, or `hsl()`. Overrides `palette`.
speednumber0.5Animation speed multiplier. `0` freezes the streaks on their starting phase.
densitynumber13Vertical streak count — multiplied into the sine frequency. Higher = more, thinner streaks.
flownumber1How much the analytic flow + 4-octave fbm warp the streaks' X position (0–1). Smoothed internally — preset switches and slider drags glide between values instead of jumping. At `0` the streaks stand perfectly vertical.
glownumber0.55Soft bloom around the brightest streak pixels (0–1). Implemented as a `smoothstep(0.55, 1.0, streaks) * glow` lift on intensity.
vignettenumber0.55Radial darkening at the canvas corners (0–1). `0` keeps the edges fully lit.
grainnumber0.04Film-grain intensity (0–0.2). Gated by streak brightness so the dark gaps stay clean.
mouseFollowbooleantrueStreaks bend around a ring centred on the cursor — distortion peaks at a fixed radius (≈0.24 UV) and tails off both inward and outward, like a black hole's accretion disk rather than a hot point at the pointer. Enter/leave ramps via a lerped active flag so the orbit fades in and out instead of snapping.
mouseInfluencenumber0.5Strength of the ring distortion + orbital glow (0–1). Smoothed internally so prop changes interpolate over ~0.5s.
backgroundColorstringpalette's bgSolid fill drawn behind the streaks. Defaults to the preset's background. Used as the reduced-motion CSS fallback base.
classNamestring—Extra class names merged onto the outermost wrapper. Width and height are governed here — the canvas fills the container.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/chroma-flow.json

Usage

Import the component and drop it into a render.

demo.tsx30 lines
import { ChromaFlow } from "@/components/lazy-ui/chroma-flow";

export function Demo() {
  return (
    <ChromaFlow
      palette="sunset"
      speed={0.5}
      density={13}
      flow={1}
      glow={0.55}
      vignette={0.55}
      grain={0.04}
      mouseInfluence={0.5}
      mouseFollow
      className="min-h-[640px] rounded-2xl"
    >
      <main className="relative z-10 max-w-md px-8 pt-24 pb-12">
        <h1 className="text-5xl leading-tight tracking-tight text-white">
          Backgrounds that
          <br />
          <span className="font-semibold italic">bend with you.</span>
        </h1>
        <p className="mt-3 text-sm text-white/80">
          Move the cursor — distortion peaks at a ring around it, like a
          black hole's accretion disk. Never just a hot point at the centre.
        </p>
      </main>
    </ChromaFlow>
  );
}