Pixel Dither

A canvas dithering effect that assembles an image from scattered pixels on load, then lets the cursor magnetically displace nearby cells.

Customize

Image URL

Color mode

Dark tone

Light tone

Shape

Intro from

Pixel size2px

Gap0px

Density100%

Radius110px

Strength26px

Intro duration1.4s

Interactive

Intro

Usage

import { PixelDither } from "@/components/lazy-ui/pixel-dither";

export function Demo() {
  return (
    <div className="relative h-96 w-full overflow-hidden rounded-2xl bg-black">
      <PixelDither
        src="/images/photo.jpg"
        pixelSize={6}
        gap={1}
        interactionRadius={110}
        strength={26}
        className="absolute inset-0"
      />
    </div>
  );
}