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

Tweak the props live

Dimensions

Width (px)240

Height (px)320

3D Effects

Max Rotation (degrees)20

Max Translation (px)20

Spotlight Effect

Animation

Stagger Delay (ms)100

Reveal Animation

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)

Default:undefined

titlestring

Card title

Default:""

descriptionstring

Card description/content

Default:undefined

widthnumber

Width of the card in pixels

Default:240

heightnumber

Height of the card in pixels

Default:320

maxRotationnumber

Maximum rotation angle in degrees

Default:20

maxTranslationnumber

Maximum translation for parallax effect in pixels

Default:20

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

Default:undefined

hrefstring

URL to navigate to when card is clicked

Default:undefined

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

Target for link navigation

Default:"_self"

imageAltstring

Alt text for the background image

Default:undefined

disableOnMobileboolean

Disable 3D effects on mobile devices

Default:false

ariaLabelstring

ARIA label for accessibility

Default:undefined

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

Multiple layers for advanced parallax effect

Default:undefined

staggerDelaynumber

Stagger delay between content elements in ms

Default:100

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

Content reveal animation type

Default:"slide"

respectReducedMotionboolean

Respect user's reduced motion preference

Default:true

spotlightboolean

Enable spotlight effect that follows the cursor

Default:true

spotlightColorstring

Color of the spotlight effect

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