Tilt
A wrapper that applies a mouse-tracking CSS 3D perspective tilt to any child element.
Installation
npx dafink-ui add tiltDemo
Hover me
max=20
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Content to tilt. Can be any element: card, image, hero block. |
| max | number | 15 | Maximum tilt angle in degrees. |
| scale | number | 1.05 | Scale factor applied while the cursor is inside the element. |
| perspective | number | 1000 | CSS perspective distance in pixels. Lower values exaggerate the effect. |
| className | string | "" | Additional classes applied to the wrapper div. |
Accessibility
Tilt has no focus model of its own: the transform is driven entirely by onMouseMove/onMouseLeave on a plain wrapper div with no role or keyboard handling, so keyboard and touch users never trigger it, which is acceptable since the tilt is purely decorative and conveys no information. The component does not read prefers-reduced-motion internally — there is no media-query check anywhere in its source — so a consumer who wants to respect that preference must either skip rendering the Tilt wrapper or pass max=0 themselves.