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