Dither Shader

"use client";

import { DitherShader } from "@/components/vritti/dither-shader";

export function DitherShaderExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="h-[400px] w-[400px]">
        <DitherShader
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop"
          ditherMode="bayer"
          colorMode="grayscale"
          gridSize={4}
        />
      </div>
    </div>
  );
}

"use client";

import { DitherShader } from "@/components/vritti/dither-shader";

export function DitherShaderAnimatedExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="h-[400px] w-[400px]">
        <DitherShader
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop"
          ditherMode="noise"
          colorMode="original"
          gridSize={3}
          animated
          animationSpeed={0.02}
        />
      </div>
    </div>
  );
}

"use client";

import { DitherShader } from "@/components/vritti/dither-shader";

export function DitherShaderCrosshatchExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="h-[400px] w-[400px]">
        <DitherShader
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop"
          ditherMode="crosshatch"
          colorMode="grayscale"
          gridSize={4}
          invert
        />
      </div>
    </div>
  );
}

"use client";

import { DitherShader } from "@/components/vritti/dither-shader";

export function DitherShaderDuotoneExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="h-[400px] w-[400px]">
        <DitherShader
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop"
          ditherMode="bayer"
          colorMode="duotone"
          primaryColor="#1e40af"
          secondaryColor="#fbbf24"
          gridSize={4}
        />
      </div>
    </div>
  );
}

"use client";

import { DitherShader } from "@/components/vritti/dither-shader";

export function DitherShaderHalftoneExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <div className="h-[400px] w-[400px]">
        <DitherShader
          src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=400&fit=crop"
          ditherMode="halftone"
          colorMode="original"
          gridSize={6}
        />
      </div>
    </div>
  );
}