Logoorix-UI

Tilt Card

An interactive 3D card that tilts on mouse hover.

Preview

Interactive Preview

3D Perspective

This card reacts to your mouse movement with realistic depth.

Installation

Usage

tsx
import { TiltCard } from "@/components/ui/tilt-card"

export default function Demo() {
  return (
    <TiltCard rotateXMax={20} rotateYMax={20}>
      <h3 className="text-2xl font-bold">Interactive Tilt</h3>
      <p className="text-muted-foreground">Hover to experience 3D depth.</p>
    </TiltCard>
  )
}

Dependencies

framer-motion

Props

PropTypeDefault
rotateXMaxnumber15
rotateYMaxnumber15