Tilt Card

1"use client"
2 
3import * as React from "react"
4import {
5  motion,
6  useMotionValue,
7  useSpring,
8  useTransform,
9} from "motion/react"
10import { cn } from "@/registry/wise-ui/lib/utils"
11 
12interface TiltCardProps {
13  tiltMax?: number
14  glare?: boolean
15  glareOpacity?: number
16  scale?: number
17  perspective?: number
18  children: React.ReactNode
19  className?: string
20}
21 
22const springConfig = { stiffness: 300, damping: 20, mass: 0.5 }
23 
24function TiltCard({
25  tiltMax = 15,
26  glare = true,
27  glareOpacity = 0.15,
28  scale = 1.02,
29  perspective = 1000,
30  children,
31  className,
32}: TiltCardProps) {
33  const ref = React.useRef<HTMLDivElement>(null)
34 
35  const rawX = useMotionValue(0)
36  const rawY = useMotionValue(0)
37  const rawScale = useMotionValue(1)
38 
39  const rotateX = useSpring(rawX, springConfig)
40  const rotateY = useSpring(rawY, springConfig)
41  const springScale = useSpring(rawScale, springConfig)
42 
43  const glareX = useMotionValue(50)
44  const glareY = useMotionValue(50)
45 
46  const glareBackground = useTransform(
47    [glareX, glareY],
48    ([x, y]) =>
49      `radial-gradient(circle at ${x}% ${y}%, rgba(255,255,255,${glareOpacity}), transparent 60%)`
50  )
51 
52  function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
53    const el = ref.current
54    if (!el) return
55    const rect = el.getBoundingClientRect()
56    const centerX = rect.left + rect.width / 2
57    const centerY = rect.top + rect.height / 2
58    const offsetX = (e.clientX - centerX) / (rect.width / 2)
59    const offsetY = (e.clientY - centerY) / (rect.height / 2)
60 
61    rawX.set(offsetY * tiltMax)
62    rawY.set(-offsetX * tiltMax)
63 
64    // Glare follows mouse position as percentage
65    glareX.set(((e.clientX - rect.left) / rect.width) * 100)
66    glareY.set(((e.clientY - rect.top) / rect.height) * 100)
67  }
68 
69  function handleMouseEnter() {
70    rawScale.set(scale)
71  }
72 
73  function handleMouseLeave() {
74    rawX.set(0)
75    rawY.set(0)
76    rawScale.set(1)
77    glareX.set(50)
78    glareY.set(50)
79  }
80 
81  return (
82    <motion.div
83      ref={ref}
84      className={cn("relative", className)}
85      style={{
86        perspective,
87        transformStyle: "preserve-3d",
88        rotateX,
89        rotateY,
90        scale: springScale,
91      }}
92      onMouseMove={handleMouseMove}
93      onMouseEnter={handleMouseEnter}
94      onMouseLeave={handleMouseLeave}
95    >
96      {children}
97      {glare && (
98        <motion.div
99          className="pointer-events-none absolute inset-0 rounded-[inherit] z-10"
100          style={{ background: glareBackground }}
101// … truncated