Tilted Card

3D perspective tilt card reacting to pointer.

Default

Move the pointer over the card. Every prop is wired to the controls underneath.

Kendrick Lamar - GNX Album Cover — Kendrick Lamar - GNX

Customize

Rotate Amplitude12

Scale on Hover1.05

Show TooltipShow Overlay Content

API Reference

TiltedCard

Prop	Type	Default	Description
`imageSrc`	`string`	`N/A`	The source URL of the image.
`altText`	`string`	`Tilted card image`	Alternative text for the image.
`captionText`	`string`		Text for the tooltip caption.
`containerHeight`	`string`	`300px`	Height of the overall card container.
`containerWidth`	`string`	`100%`	Width of the overall card container.
`imageHeight`	`string`	`300px`	Height of the inner image.
`imageWidth`	`string`	`300px`	Width of the inner image.
`scaleOnHover`	`number`	`1.1`	Scaling factor applied on hover.
`rotateAmplitude`	`number`	`14`	Controls how much the card tilts with mouse movement.
`showMobileWarning`	`boolean`	`true`	Whether to show a small alert about mobile usage.
`showTooltip`	`boolean`	`true`	Toggles the visibility of the tooltip (figcaption).
`displayOverlayContent`	`boolean`	`false`	Whether to display the overlay slot on top of the image.

Slot	Description
`overlay`	Content displayed on top of the image when displayOverlayContent is on.

Accessibility

Keyboard shortcuts and ARIA behavior.

The image carries the altText. The caption follows the pointer and is purely visual, so put the same text in altText.
The effect needs a pointer. On touch screens the card stays flat.

Thinking Orb TipTap Editor