Motion UIComponentsComponent

Tilt card

A card that leans toward the pointer in 3D, on compositor transforms only.

API reference

Components

`<TiltCard />`

Tile that leans towards the pointer with entrance/tilt split across two elements.

`item`

Variants

Entrance variant for the outer element.

`interactive`

boolean

Whether the tilt and micro-interaction hooks are live.

`maxTilt`

number

Maximum pointer-tilt swing, in degrees.

`outerClassName?`

string

Merged onto the outer element.

`className?`

string

Merged onto the inner tilting element.

`href?`

string

When set, the inner element is a real <a href>.

`target?`

string

Anchor target. Only meaningful with href.

`rel?`

string

Anchor rel. Only meaningful with href.

`onHoverStart?`

() => void

Hover-start callback for the <div> form. Ignored when href is set.

`whileHover?`

string

Drives descendant ArrowNudge instances on hover/focus. Only meaningful with href.

`whileFocus?`

string

Reserved for API symmetry with anchor gesture wiring.

`children`

ReactNode

The card's content.

Hooks

`usePointerTilt`

Pointer-tilt mechanic for composing onto an element you already own.

usePointerTilt(maxTilt: number, interactive: boolean): PointerTilt

Returns

`ref`

(element: HTMLElement | null) => void

Callback ref for the tilting element.

`style`

MotionStyle | undefined

rotateX / rotateY springs plus perspective. undefined when not interactive.

`onPointerMove`

((event: React.PointerEvent<HTMLElement>) => void) | undefined

Pointer-move handler. undefined when not interactive.

`onPointerLeave`

(() => void) | undefined

Pointer-leave handler. undefined when not interactive.

Featured in

See the tilt card composed into full sections.

Feature bentoAn example of a staggered feature bento with scroll-triggered reveals and considered hover micro-interactions in Motion for React.