Pixel Image Demo

PreviousNext

Example showing a pixelated image effect.

Docs
magicuiexample

Preview

Loading preview…
registry/example/pixel-image-demo.tsx
import { PixelImage } from "@/registry/magicui/pixel-image"

export default function Home() {
  return (
    <PixelImage
      src="/pixel-image-demo.jpg"
      customGrid={{ rows: 4, cols: 6 }}
      grayscaleAnimation
    />
  )
}

Installation

npx shadcn@latest add @magicui/pixel-image-demo

Usage

import { PixelImageDemo } from "@/components/pixel-image-demo"
<PixelImageDemo />