Dither Flow

Shaders 1

About

An animated WebGL background that renders slow, flowing cloth-like folds as a four-tone ordered-dither pixel grid, with the pointer stirring a soft swirl into the pattern.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Dither Flow to your project and fits it to your theme.

Code

How Dither Flow is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { DitherFlow } from "@/components/ui/dither-flow";

export default function DitherFlowPhosphorDemo() {
  return (
    <div className="h-screen w-full">
      <DitherFlow
        palette={["#040805", "#1f7a3c", "#7ff29a", "#effff1"]}
        className="h-full w-full"
      >
        <div className="pointer-events-none flex h-full flex-col justify-end bg-[linear-gradient(to_top,rgb(0_0_0/0.72),transparent_45%)] p-6 sm:p-10">
          <p className="font-mono text-[11px] uppercase tracking-[0.18em] text-white/60">
            Vitrine · Signal 02
          </p>
          <h2 className="mt-2 max-w-[14ch] text-[clamp(2rem,5vw,3.6rem)] font-semibold leading-[1] tracking-[-0.035em] text-white">
            Soft light, hard pixels.
          </h2>
        </div>
      </DitherFlow>
    </div>
  );
}