Parallax Cards

3D layered card display with mouse-driven parallax depth effect

parallax-cards-tw

Customize

Card Count

Perspective

2500

Mouse Sensitivity

3.0

Animation Duration

1.2

Enable Depth FogEnable Magnetic Attraction

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[]

cardCountnumber

Number of cards to display (max 12, defaults to array length)

Defaultimages.length

perspectivenumber

3D perspective strength in pixels (higher = less dramatic)

Default2500

mouseSensitivitynumber

Mouse movement sensitivity multiplier for parallax effect

Default3

cardWidthnumber

Card width in pixels (responsive by default)

Defaultundefined

cardHeightnumber

Card height in pixels (responsive by default)

Defaultundefined

animationDurationnumber

Duration in seconds for position transition animations

Default1.2

enableDepthFogboolean

Enable depth fog effect (fade and blur distant cards)

Defaultfalse

fogIntensitynumber

Fog intensity multiplier (0-2)

Default1

enableMagneticAttractionboolean

Enable magnetic attraction to mouse cursor

Defaultfalse

magneticStrengthnumber

Magnetic attraction strength in pixels

Default50

onCardClick(index: number, imageUrl: string) => void

Callback fired when a card is clicked

Defaultundefined

classNamestring

Additional CSS classes for the container

Default""