Pixel Reveal Card
A card that reveals its content through a pixel dissolve
Colored pixels covering the card's content fade out cell by cell in a specified order, revealing what lies beneath like a mosaic blown away by the wind. Hover and enter-the-viewport triggers are both supported, and the whole effect is drawn on a 2D canvas for steady performance.
npx shadcn@latest add https://webberui.com/r/pixel-reveal-card.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PixelRevealCard />
Installation
npx shadcn@latest add https://webberui.com/r/pixel-reveal-card.jsonOr, once registries are configured in components.json, install it as @webberui/pixel-reveal-card.
Usage
import { PixelRevealCard } from "@/components/ui/pixel-reveal-card";
<PixelRevealCard trigger="hover" pixelSize={14} className="h-[300px] w-[260px]">
<div className="flex h-full w-full flex-col justify-end bg-gradient-to-br from-indigo-500 to-fuchsia-500 p-5 text-white">
<h3 className="text-xl font-semibold">Nebula Pass</h3>
<p className="mt-1 text-sm text-white/80">Hover to reveal.</p>
</div>
</PixelRevealCard>Write the card content in children as usual; while it is covered the content is still in the DOM and readable by assistive technology. The container has no height by default, so give it an explicit size through className (for example h-[300px] w-[260px]).
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The card content to be revealed |
trigger | "hover" | "view" | "hover" | How it is triggered: toggle on hover, or reveal automatically on entering the viewport |
pixelSize | number | 16 | Edge length of a single pixel (px); smaller values give finer grain |
colors | string[] | four indigo-to-magenta colors | Colors of the overlay layer, picked at random per cell to form the mosaic |
direction | "random" | "left" | "right" | "top" | "bottom" | "diagonal" | "random" | Ordering direction of the pixel dissolve |
duration | number | 0.9 | Time a full dissolve or refill takes (seconds) |
once | boolean | true | Whether to reveal only once when trigger="view" |
className | string | — | Forwarded to the outermost container; use it to set the size and styles |
Accessibility
- When the user has "reduce motion" enabled at the system level, the content shows directly and no pixel overlay is drawn
- The content stays in the DOM while covered, and the
canvasoverlay is markedaria-hidden, so it does not affect what assistive technology announces - In
hovermode the card can be focused with the keyboard (focusreveals,blurrefills)