Installation

Usage

import { PixelatedImageReveal } from '@/components/sora-ui/effects/pixelated-image-reveal';

export default function Page() {
  return (
    <PixelatedImageReveal
      className="mx-auto w-72"
      defaultSrc="/images/default.jpg"
      activeSrc="/images/active.jpg"
      pixelColor="#ff4c24"
      alt="Product preview"
    />
  );
}

Props

When to Use

Use PixelatedImageReveal for portfolio project cards, product imagery with a "before/after" story, or interactive gallery thumbnails. The pixel grid reveal adds personality to a static grid and encourages hovering.

It works best when there is clear visual contrast between the default and active image — for example, a monochrome default with a color active, or a portrait with a project screenshot.

Accessibility

Both defaultSrc and activeSrc represent the same content in different visual states. Provide a meaningful alt description of what the image shows. The reveal transition is purely visual; screen readers announce only the alt text. The component responds to tap on touch devices as well as hover on pointer devices. When prefers-reduced-motion: reduce is set, useReducedMotion() skips the staggered pixel reveal and swaps between images directly — no extra configuration needed.