← All components
Surfaces / component
Tilted Card
A photograph tilts with spring physics and a floating caption.
PLAYGROUND
Take it with you.
SOURCE ACCESS
Preview freely. Unlock the files.
Enter the shared password to copy the complete source, download every file, and install components in your app.
Access lasts 24 hours. Your preview settings stay with you.
Component notes
- The included Demo.tsx and shared/demo.css recreate the complete preview. Import the main component to compose your own design.
- Reduced motion keeps a still effect. Hidden and offscreen instances stop requesting frames; all owned work is cancelled on unmount.
- Focus the image and use arrow keys to tilt; Home returns it to center. Replace the included demo photograph using imageSrc and describe it with altText.
React 19CSSFramer Motion 12.42.2
React Bits · MIT with Commons Clause. Used with explicit project permission; see bundled notice.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
imageSrc (required) | string | — (required) | Image URL |
altText | string | Tilted card image | Image description |
captionText | string | '' | Caption |
rotateAmplitude | number | 14 | Tilt amplitude |
scaleOnHover | number | 1.1 | Hover scale |
imageHeight | string | number | 300px | Image height |
imageWidth | string | number | 300px | Image width |
showTooltip | boolean | true | Show caption |
showMobileWarning | boolean | true | Show touch hint |
containerHeight | CSSProperties[height] | 300px | Height of the perspective stage. |
containerWidth | CSSProperties[width] | 100% | Width of the perspective stage. |
overlayContent | ReactNode | undefined | Optional layer lifted 30px above the image. |
displayOverlayContent | boolean | false | Display the optional overlay layer. |
paused | boolean | false | Freeze the current frame; hidden time is excluded. |
replayToken | number | 0 | Change this value to restart the effect. |