A canvas card whose picture breaks into a grid of pixels in a wave that starts where the pointer enters, then reforms on leave.
38 m2, south facing, from 1,450 / month
npx shadcn@latest add https://hyperblur.dev/r/card-pixel-hover.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/card-pixel-hover.tsx.
import { CardPixelHover } from "@/components/hyperblur/card-pixel-hover"
<CardPixelHover title="Sunroom studio" subtitle="38 m2, from 1,450" tag="Available May 1" />| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Sunroom studio, Lisbon" | Heading shown at the bottom of the card. |
| subtitle | string | "38 m2, south facing, from 1,450 / month" | Line of supporting text under the title. |
| tag | string | "Available May 1" | Small pill at the top left. Hidden when empty. |
| src | string | Image URL drawn into the canvas. A built-in gradient landscape is drawn when missing. | |
| accent | string | "#2f7bff" | Color of the built-in scene and the focus ring. |
| cell | number | 16 | Approximate pixel size in CSS pixels. |
| ratio | number | 1.75 | Width divided by height of the card. |
| idle | boolean | true | Play the wave on its own now and then until the pointer arrives. |