We are live on DevHunt: tool of the week contest

check it out

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