Parallax Cards
3D layered card display with mouse-driven parallax depth effect
parallax-cards-tw
Customize
12
2500
3
1.2
Props
| Name | Type | Default | Description |
|---|---|---|---|
| images | string[] | [] | Array of image URLs to display in 3D space |
| cardCount | number | images.length | Number of cards to display (max 12, defaults to array length) |
| perspective | number | 2500 | 3D perspective strength in pixels (higher = less dramatic) |
| mouseSensitivity | number | 3 | Mouse movement sensitivity multiplier for parallax effect |
| cardWidth | number | undefined | Card width in pixels (responsive by default) |
| cardHeight | number | undefined | Card height in pixels (responsive by default) |
| animationDuration | number | 1.2 | Duration in seconds for position transition animations |
| enableDepthFog | boolean | false | Enable depth fog effect (fade and blur distant cards) |
| fogIntensity | number | 1 | Fog intensity multiplier (0-2) |
| enableMagneticAttraction | boolean | false | Enable magnetic attraction to mouse cursor |
| magneticStrength | number | 50 | Magnetic attraction strength in pixels |
| onCardClick | (index: number, imageUrl: string) => void | undefined | Callback fired when a card is clicked |
| className | string | "" | Additional CSS classes for the container |