Dither Shader

"use client";
import { DitherShader } from "@/lab/aceternity/ui/dither-shader";
import { Fit } from "./_fit";

export default function DitherShaderDemo() {
  return (
    <Fit width={680} height={460} max={1.3}>
      <div className="flex h-full w-full items-center justify-center">
        <div className="relative overflow-hidden rounded-2xl border border-neutral-200 dark:border-neutral-800">
          <DitherShader
            src="https://images.unsplash.com/photo-1493246507139-91e8fad9978e?q=80&w=1400&auto=format&fit=crop"
            gridSize={2}
            ditherMode="bayer"
            colorMode="grayscale"
            invert={false}
            animated
            animationSpeed={0.02}
            primaryColor="#000000"
            secondaryColor="#f5f5f5"
            threshold={0.5}
            className="h-96 w-[600px]"
          />
        </div>
      </div>
    </Fit>
  );
}