Pixel dissolve transition for content reveal on hover.
Hover or focus the card to dissolve into the second content through a grid of pixels, on touch screens tap it instead. Grid size, duration and pixel color are wired to the controls underneath.
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 7 | Number of rows/columns in the pixel grid. |
pixelColor | string | currentColor | Background color used for each pixel block. |
animationStepDuration | number | 0.3 | Length of the pixel reveal/hide in seconds. |
aspectRatio | string | "100%" | Sets the padding-top of the container, which gives it its height. |
once | boolean | false | If true, the transition will not revert on mouse leave or subsequent clicks. |
| Slot | Description |
|---|---|
first-content | Content to show by default (e.g., an img or text). |
second-content | Content revealed upon hover or click. |
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Tab | Focuses the card, which plays the transition. Moving focus away reverts it. |
