Dither Image

Component 20

About

An image component that renders a photo with a canvas-based dithering effect (Bayer, Atkinson, Floyd–Steinberg, or threshold algorithms) and an optional progressive scroll reveal.

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

Code

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

Usage.tsx

"use client";

import DitherImage from "@/components/ui/dither-image";

export default function DitherImageDemo() {
  return (
    <div className="flex items-center justify-center p-8">
      <DitherImage
        alt="Foggy mountain landscape"
        src="https://cdn.21st.dev/assets/mirror/5f/5f694eb39e2f54e7361b7fd828e2250a864f721a4283a1c37f7bd0dae99650a9.jpg"
        width={480}
        height={320}
      />
    </div>
  );
}