Depth Card

A card that tilts with depth as the cursor moves

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)"

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