Pixel Reveal Card

A card with a pixel reveal effect.

Default

A card with a pixel reveal effect

Terry

Software Developer

default-example.tsx

1import { PixelRevealCard } from "@/registry/ui/pixel-reveal-card";
2
3export function PixelRevealCardDefaultExample() {
4  return (
5    <PixelRevealCard
6      image="https://zorlgi4yg6.ufs.sh/f/xOzRGhmN6r4KonqzgsYB3OPraY20ZCl5fdGHztWRLbwnIjqD"
7      name="Terry"
8      role="Software Developer"
9    />
10  );
11}

Installation & source

Install via the shadcn CLI or copy the registry files manually.

bash

npx shadcn@latest add @tt-ui/pixel-reveal-card

Props

Name	Type	Default	Description
image	string	Required	The image of the card
name	string	undefined	Full name or project title displayed above image
role	string	undefined	Role or job title displayed below name
pixelSize	number	18	Approximate size (in px) of each pixel tile. Smaller = more pixels = denser effect. Default 18.
animationDuration	number	850	Total reveal/reassemble duration in ms. Default 850.