Layered cards that shift in depth with the cursor
| 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 |
imagesstring[]Array of image URLs to display in 3D space
[]cardCountnumberNumber of cards to display (max 12, defaults to array length)
images.lengthperspectivenumber3D perspective strength in pixels (higher = less dramatic)
2500mouseSensitivitynumberMouse movement sensitivity multiplier for parallax effect
3cardWidthnumberCard width in pixels (responsive by default)
undefinedcardHeightnumberCard height in pixels (responsive by default)
undefinedanimationDurationnumberDuration in seconds for position transition animations
1.2enableDepthFogbooleanEnable depth fog effect (fade and blur distant cards)
falsefogIntensitynumberFog intensity multiplier (0-2)
1enableMagneticAttractionbooleanEnable magnetic attraction to mouse cursor
falsemagneticStrengthnumberMagnetic attraction strength in pixels
50onCardClick(index: number, imageUrl: string) => voidCallback fired when a card is clicked
undefinedclassNamestringAdditional CSS classes for the container
""