Pixelate Hover Card React component
A photo card that breaks into a chunky pixel mosaic on hover and resolves into a second photo, or comes into focus from pixels, drawn on a canvas in stepped block sizes with a live pixel-size readout, touch and keyboard support and a reduced-motion crossfade.
About the Pixelate Hover Card component
Pixelate Hover Card turns a hover into a small piece of digital theatre: the photo breaks into a chunky pixel mosaic, then resolves into a second photo. It can also run the other way round, resting as pixels and coming into focus when you point at it, or simply pixelate on hover.
The mosaic steps through fixed block sizes rather than blurring smoothly, which is what gives it that 8-bit snap, and a small readout in the corner counts the pixel size as it changes. It's drawn on a canvas, so it stays light even with several cards on the page.
When to use it
Use it for portfolio series where a second frame rewards curiosity, for creative studios, game and music sites, or anywhere a slightly glitchy, digital feel fits the brand.
Skip it for product photos people need to inspect; the effect hides detail on purpose.
Installation
Add the Pixelate Hover Card component to your project with the shadcn CLI. It lands in components/pixelate-hover-card.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/pixelate-hover-cardOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<PixelateHoverCard /> accepts 14 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| image | string | "/demo/5.webp" |
| hoverImage | string | "/demo/8.webp" |
| imageAlt | string | "" |
| mode | "swap" | "sharpen" | "pixelate" | "swap" |
| title | string | "Quiet rooms" |
| subtitle | string | "Interiors · 12 frames" |
| label Small mono label top-left, e.g. "Series 01". | string | "Series 01" |
| href | string | — |
| maxBlock Largest pixel size in CSS px. | number | 32 |
| duration Full transition time in ms. | number | 640 |
| showReadout Show the live pixel-size readout. | boolean | true |
| aspectRatio Width / height of the card. | number | 4 / 5 |
- imagestringDefault: "/demo/5.webp"
- hoverImagestringDefault: "/demo/8.webp"
- imageAltstringDefault: ""
- mode"swap" | "sharpen" | "pixelate"Default: "swap"
- titlestringDefault: "Quiet rooms"
- subtitlestringDefault: "Interiors · 12 frames"
- label
Small mono label top-left, e.g. "Series 01".
stringDefault: "Series 01" - hrefstring
- maxBlock
Largest pixel size in CSS px.
numberDefault: 32 - duration
Full transition time in ms.
numberDefault: 640 - showReadout
Show the live pixel-size readout.
booleanDefault: true - aspectRatio
Width / height of the card.
numberDefault: 4 / 5
Show all 14 propsShow fewer
| radius | number | 18 |
| theme | "dark" | "light" | "dark" |
- radiusnumberDefault: 18
- theme"dark" | "light"Default: "dark"
npm dependencies
Installed for you by the shadcn CLI.
Pixelate Hover Card FAQ
- Do I need two images?
- Only for mode="swap". The sharpen and pixelate modes work on a single image.
- Will it work with images from another domain?
- Yes. The card only draws the image onto the canvas and never reads its pixels back, so it doesn't need CORS headers.
- How chunky can it get?
- maxBlock sets the biggest pixel size in CSS pixels (32 by default). Larger values give a coarser mosaic at the peak.
- What happens on phones and with reduced motion?
- A tap toggles the effect on touch screens. With reduced motion turned on, swap mode crossfades between the photos and the other modes stay still.
