Card content revealed through pixel expansion transition.
Hover or focus the card to grow the pixel field. Pick a variant to change the palette, grid gap and speed.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "yellow" | "blue" | "pink" | "default" | Defines the color scheme and animation style. |
gap | number | varies by variant | Pixel grid gap size in pixels. |
speed | number | varies by variant | Animation speed modifier (lower is slower). |
colors | string | "#f8fafc,#f1f5f9,#cbd5e1" | Comma-separated list of colors for the pixel effect. |
noFocus | boolean | false | If true, prevents animation from triggering on focus. |
| Prop | Type | Default | Description |
|---|---|---|---|
default | slot | - | Content to render inside the pixel effect container. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Focuses the card and runs the effect, unless noFocus is set. |