Depth Card

Perspective depth effect that responds to mouse movement

depth-card-tw

Mountains

Tall majestic peaks.

Ocean

Clear water, blue skies.

Forest

Old growth, tall trees.

Customize

Width (px)

240

Height (px)

320

Max Rotation (degrees)

Max Translation (px)

Spotlight Effect

Stagger Delay (ms)

100

Props

Name	Type	Default	Description
`image`	string	`undefined`	Background image URL for the card (optional if using layers)
`title`	string	`""`	Card title
`description`	string	`undefined`	Card description/content
`width`	number	`240`	Width of the card in pixels
`height`	number	`320`	Height of the card in pixels
`maxRotation`	number	`20`	Maximum rotation angle in degrees
`maxTranslation`	number	`20`	Maximum translation for parallax effect in pixels
`borderRadius`	string	`"10px"`	Border radius of the card
`className`	string	`""`	Additional CSS classes for the wrapper
`contentClassName`	string	`""`	Additional CSS classes for the card content
`onClick`	() => void	`undefined`	Callback when card is clicked
`href`	string	`undefined`	URL to navigate to when card is clicked
`target`	"_blank" \| "_self" \| "_parent" \| "_top"	`"_self"`	Target for link navigation
`imageAlt`	string	`undefined`	Alt text for the background image
`disableOnMobile`	boolean	`false`	Disable 3D effects on mobile devices
`ariaLabel`	string	`undefined`	ARIA label for accessibility
`layers`	Array<{image: string, depth: number}>	`undefined`	Multiple layers for advanced parallax effect
`staggerDelay`	number	`100`	Stagger delay between content elements in ms
`revealAnimation`	"slide" \| "fade" \| "scale" \| "none"	`"slide"`	Content reveal animation type
`respectReducedMotion`	boolean	`true`	Respect user's reduced motion preference
`spotlight`	boolean	`true`	Enable spotlight effect that follows the cursor
`spotlightColor`	string	`"rgba(255, 255, 255, 0.5)"`	Color of the spotlight effect

imagestring

Background image URL for the card (optional if using layers)

Defaultundefined

titlestring

Card title

Default""

descriptionstring

Card description/content

Defaultundefined

widthnumber

Width of the card in pixels

Default240

heightnumber

Height of the card in pixels

Default320

maxRotationnumber

Maximum rotation angle in degrees

Default20

maxTranslationnumber

Maximum translation for parallax effect in pixels

Default20

borderRadiusstring

Border radius of the card

Default"10px"

classNamestring

Additional CSS classes for the wrapper

Default""

contentClassNamestring

Additional CSS classes for the card content

Default""

onClick() => void

Callback when card is clicked

Defaultundefined

hrefstring

URL to navigate to when card is clicked

Defaultundefined

target"_blank" | "_self" | "_parent" | "_top"

Target for link navigation

Default"_self"

imageAltstring

Alt text for the background image

Defaultundefined

disableOnMobileboolean

Disable 3D effects on mobile devices

Defaultfalse

ariaLabelstring

ARIA label for accessibility

Defaultundefined

layersArray<{image: string, depth: number}>

Multiple layers for advanced parallax effect

Defaultundefined

staggerDelaynumber

Stagger delay between content elements in ms

Default100

revealAnimation"slide" | "fade" | "scale" | "none"

Content reveal animation type

Default"slide"

respectReducedMotionboolean

Respect user's reduced motion preference

Defaulttrue

spotlightboolean

Enable spotlight effect that follows the cursor

Defaulttrue

spotlightColorstring

Color of the spotlight effect

Default"rgba(255, 255, 255, 0.5)"