3D spring physics card that follows cursor movement with smooth lerp interpolation and rotation effects.
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | undefined | Custom content to render inside the card |
| imgSrc | string | undefined | Image source URL for the card background |
| imgAlt | string | "Card image" | Alt text for the card image |
| widthClass | string | "w-28 sm:w-32 md:w-40 lg:w-56" | Tailwind width class for card size |
| heightClass | string | "h-36 sm:h-40 md:h-52 lg:h-72" | Tailwind height class for card size |
| className | string | "" | Additional CSS classes for positioning |
| style | CSSProperties | {} | Inline styles for the wrapper |
| initialRotation | number | 0 | Initial rotation angle in degrees (positive = clockwise) |
| offsetX | number | 0 | Horizontal offset from the card's base position |
| delay | number | 0 | Animation delay in seconds for entrance animation |
| index | number | 0 | Index used for staggered entrance animations |
| interactive | boolean | true | Enable/disable cursor tracking interaction |
| maxRotation | number | 18 | Maximum rotation angle when following cursor |
| maxX | number | 80 | Maximum horizontal displacement in pixels |
| maxY | number | 60 | Maximum vertical displacement in pixels |
| lerpSpeed | number | 0.1 | Speed of the spring interpolation (lower = smoother but slower) |
| mobileVisible | boolean | true | Whether the card is visible on mobile screens (< 640px) |