Pixel Card
A surface that dissolves a mosaic of pixels into view on hover or focus.
canvashovera11y
Styled with ONONC's design tokens — shadcn add installs them for you.
Customize
Pixels
Pixel size10px
Pixel gap2px
Fill speed4
Variance0.35
Randomness of per-pixel timing and shading.
Style
Color
Corner radius16px
Always on
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children* | ReactNode | — | Card content, layered above the pixel canvas. |
pixelSize | number | 10 | Size of each pixel square, in pixels. |
gap | number | 2 | Gap between pixels, in pixels. |
color | string | "#8b5cf6" | Pixel fill color (hex). |
speed | number | 4 | Fill progress per second (higher fills faster). |
variance | number | 0.35 | Randomness of per-pixel timing and shading (0–1). |
active | boolean | false | Reveal the pixels without a pointer/focus (always on). |
radius | number | 16 | Corner radius in pixels. |
label | string | — | Accessible name for the card. |