Pixel Image

PreviewCode

Open in

Copy

import { PixelImage } from "@/registry/magicui/pixel-image";

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

Features

• Pixelated image reveal animation
• Customizable grid size and layout
• Supports grayscale-to-color animation
• Adjustable animation duration and delay
• Lightweight and easy to use

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @magicui/pixel-image
Copy

Usage

Copyimport { PixelImage } from "@/registry/magicui/pixel-image";

Copy<PixelImage src="/pixel-image-demo.jpg" grid="8x8" />

Props

Grid Type

Copy// Predefined grid options
"6x4" | "8x8" | "8x3" | "4x6" | "3x8"
 
// Custom grid example
customGrid={{ rows: 5, cols: 10 }}

Note

• Since the pixelation effect is purely decorative, make sure to provide text alternatives (like descriptions or labels) for any important content shown in the image. This ensures the content is accessible to screen reader users.

Credits

• Credit to @dharminnagar for implementation