Lazy-uiLazy UI
Star0

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.

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.

Customize

Palette
Speed0.50x
Density13
Flow1.00
Glow0.55
Vignette0.55
Grain0.040
Mouse pulse0.50
Mouse follow

Usage

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>
  );
}