Depth Card
Perspective depth effect that responds to mouse movement
depth-card-tw
Customize
240
320
20
20
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 |