"use client"

import * as React from "react"
import { cn } from "@/lib/utils"

export interface TiltCardProps extends React.ComponentProps<"div"> {
  intensity?: number
}

export function TiltCard({ children, className, intensity = 10, ...props }: TiltCardProps) {
  const ref = React.useRef<HTMLDivElement>(null)
  const [tilt, setTilt] = React.useState({ rx: 0, ry: 0 })

  const onMove = (e: React.MouseEvent) => {
    const el = ref.current
    if (!el) return
    const rect = el.getBoundingClientRect()
    const px = (e.clientX - rect.left) / rect.width - 0.5
    const py = (e.clientY - rect.top) / rect.height - 0.5
    setTilt({ rx: -py * intensity, ry: px * intensity })
  }

  return (
    <div
      ref={ref}
      onMouseMove={onMove}
      onMouseLeave={() => setTilt({ rx: 0, ry: 0 })}
      className={cn("rounded-xl border border-border bg-card transition-transform duration-150 ease-out will-change-transform", className)}
      style={{
        transform: `perspective(800px) rotateX(${tilt.rx}deg) rotateY(${tilt.ry}deg)`,
        transformStyle: "preserve-3d",
      }}
      {...props}
    >
      {children}
    </div>
  )
}
Tilt Card

Installation

Usage
