Lazy-uiLazy UI
Star0

Flux Warp

A domain-warped RGB field — iterative sine/cosine folding split across red, green and blue for chromatic dispersion, with tunable frequency, contrast and warp depth. Pure GPU shader, no palette, no cursor. Pauses when off-screen.

Lazy-ui
Six lines of math, one canvas

Warped light,
split into color.

Iterative sine warping folds the field on itself; red, green and blue each sample it from a slightly different origin. No textures, no palette — the shader finds its own colors.

Customize

Frequency3.60
Contrast4.00
Dispersion0.020
Iterations3
Speed0.15
Intensity0.80
Base color

Usage

import { FluxWarp } from "@/components/lazy-ui/flux-warp";

export function Demo() {
  return (
    <FluxWarp
      frequency={3.6}
      contrast={4}
      dispersion={0.02}
      iterations={3}
      speed={0.15}
      intensity={0.8}
      baseColor="#000000"
      className="min-h-[520px] rounded-2xl"
    >
      <main className="relative z-10 flex h-full items-center justify-center px-6">
        <h1 className="text-center text-5xl font-light tracking-tight text-white">
          Color, warped.
        </h1>
      </main>
    </FluxWarp>
  );
}