Tilt

A wrapper that applies a mouse-tracking CSS 3D perspective tilt to any child element.

Installation

npx dafink-ui add tilt

Demo

Hover me
max=20

Props

NameTypeDefaultDescription
childrenReactNode-Content to tilt. Can be any element: card, image, hero block.
maxnumber15Maximum tilt angle in degrees.
scalenumber1.05Scale factor applied while the cursor is inside the element.
perspectivenumber1000CSS perspective distance in pixels. Lower values exaggerate the effect.
classNamestring""Additional classes applied to the wrapper div.