Hover parallax effect that disintegrates the content of a card.
Move the pointer around the window. The faster it travels, the more the card decays.
| Prop | Type | Default | Description |
|---|---|---|---|
width | number | 300 | The width of the card in pixels. |
height | number | 400 | The height of the card in pixels. |
image | string | 'https://picsum.photos/300/400?grayscale' | Allows setting the background image of the card. |
baseFrequency | number | 0.015 | Base frequency for the turbulence filter. Lower values create larger, smoother patterns. |
numOctaves | number | 5 | Number of octaves for the turbulence filter. Higher values add finer detail. |
seed | number | 4 | Seed value for the turbulence random number generator. |
maxDisplacement | number | 400 | Maximum displacement scale applied when the cursor moves. Controls the intensity of the decay effect. |
movementBound | number | 50 | Maximum pixel distance the card can translate from its origin when following the cursor. |
| Prop | Type | Default | Description |
|---|---|---|---|
default | VNode | - | Content rendered over the image. The first line is drawn at 6rem. |
Keyboard shortcuts and ARIA behavior.