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 DitherFlowDemo() {
return (
<div className="h-screen w-full">
<DitherFlow
palette={["#09090b", "#4b2bff", "#a996ff", "#ffffff"]}
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>
);
}
More in Heroes
View all
Responsive Hero Banner
2.1K
SaaS Template
2.6K
Centered Hero with Image Fan
1K
Hero
1.3K
Hero 03
358
Modern Landing Hero
133
HeroSectionWithGradient
374
Home Section
75
