Pixelated Canvas

"use client";

import { PixelatedCanvas } from "@/components/vritti/pixelated-canvas";

export function PixelatedCanvasExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <PixelatedCanvas
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=500&fit=crop"
        width={400}
        height={500}
        cellSize={4}
        interactive
        distortionMode="swirl"
      />
    </div>
  );
}

"use client";

import { PixelatedCanvas } from "@/components/vritti/pixelated-canvas";

export function PixelatedCanvasCircleExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <PixelatedCanvas
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=500&fit=crop"
        width={400}
        height={500}
        cellSize={6}
        shape="circle"
        interactive
        distortionMode="repel"
      />
    </div>
  );
}

"use client";

import { PixelatedCanvas } from "@/components/vritti/pixelated-canvas";

export function PixelatedCanvasGrayscaleExample() {
  return (
    <div className="flex items-center justify-center p-8">
      <PixelatedCanvas
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=400&h=500&fit=crop"
        width={400}
        height={500}
        cellSize={4}
        grayscale
        interactive
        distortionMode="attract"
        distortionStrength={5}
      />
    </div>
  );
}