PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Tilt Card

Pointer-driven 3D tilt card with Motion springs, dynamic specular highlight tracking, and interactive depth perspective.

When to use

  • Showcasing interactive product cards, portfolio items, or hero showcase graphics.
  • Adding depth and tactile responsiveness to UI cards that follow cursor coordinates.
  • Elevating imagery and promotional tickets with realistic 3D perspective and specular glow.

When not to use

  • Dense multi-row dashboards or spreadsheets where tilting disrupts reading.
  • Mobile-first views where cursor movement is not present (or wrap with touch guards).

API Reference

TiltCardProps

PropTypeDefaultDescription
childrenReactNode—Card content to render within the tilting 3D container.
maxTiltnumber10Maximum tilt angle in degrees along the X and Y axes.
highlightClassNamestring—Class names for the cursor-following radial specular highlight.
wrapperClassNamestring—Class names applied to the outer perspective perspective wrapper.
classNamestring—Class names applied to the rotating card inner container.

Motion

  • Dual spring smoothing (stiffness: 150, damping: 20) for inertia-rich cursor tracking.
  • Real-time specular highlight calculation reflecting light relative to card coordinates.
  • Perspective depth container at 1000px for realistic optical distortion.