Tilt Card

1"use client"
2 
3import { useRef, useState, useCallback } from "react"
4import { cn } from "@/lib/utils"
5 
6export interface TiltCardProps {
7  /** Maximum tilt angle in degrees */
8  tiltLimit?: number
9  /** Scale factor on hover */
10  scale?: number
11  /** Perspective distance in pixels */
12  perspective?: number
13  /** Tilt direction: "gravitate" follows cursor, "evade" tilts away */
14  effect?: "gravitate" | "evade"
15  /** Show a spotlight that follows the cursor on hover */
16  spotlight?: boolean
17  /** Additional class name */
18  className?: string
19  /** Additional inline styles */
20  style?: React.CSSProperties
21  /** Card content */
22  children?: React.ReactNode
23}
24 
25export function TiltCard({
26  tiltLimit = 15,
27  scale = 1.05,
28  perspective = 1200,
29  effect = "evade",
30  spotlight = true,
31  className,
32  style,
33  children,
34}: TiltCardProps) {
35  const cardRef = useRef<HTMLDivElement>(null)
36  const [transform, setTransform] = useState(
37    `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`
38  )
39  const [spotlightPos, setSpotlightPos] = useState({ x: 50, y: 50 })
40  const [isHovered, setIsHovered] = useState(false)
41 
42  const dir = effect === "evade" ? -1 : 1
43 
44  const handlePointerMove = useCallback(
45    (e: React.PointerEvent) => {
46      const el = cardRef.current
47      if (!el) return
48      const rect = el.getBoundingClientRect()
49      const px = (e.clientX - rect.left) / rect.width
50      const py = (e.clientY - rect.top) / rect.height
51      const xRot = (py - 0.5) * (tiltLimit * 2) * dir
52      const yRot = (px - 0.5) * -(tiltLimit * 2) * dir
53      setTransform(
54        `perspective(${perspective}px) rotateX(${xRot}deg) rotateY(${yRot}deg) scale3d(${scale}, ${scale}, ${scale})`
55      )
56      if (spotlight) {
57        setSpotlightPos({ x: px * 100, y: py * 100 })
58      }
59    },
60    [tiltLimit, scale, perspective, dir, spotlight]
61  )
62 
63  const handlePointerEnter = useCallback(() => {
64    setIsHovered(true)
65  }, [])
66 
67  const handlePointerLeave = useCallback(() => {
68    setTransform(
69      `perspective(${perspective}px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)`
70    )
71    setIsHovered(false)
72  }, [perspective])
73 
74  return (
75    <div
76      ref={cardRef}
77      onPointerEnter={handlePointerEnter}
78      onPointerMove={handlePointerMove}
79      onPointerLeave={handlePointerLeave}
80      className={cn("will-change-transform relative overflow-hidden", className)}
81      style={{
82        transform,
83        transition: "transform 0.2s ease-out",
84// … truncated