3D Card Effect

1"use client"
2 
3import { cn } from "@/lib/utils"
4 
5import React, {
6  createContext,
7  useState,
8  useContext,
9  useRef,
10  useEffect,
11} from "react"
12 
13const MouseEnterContext = createContext<
14  [boolean, React.Dispatch<React.SetStateAction<boolean>>] | undefined
15>(undefined)
16 
17export const CardContainer = ({
18  children,
19  className,
20  containerClassName,
21}: {
22  children?: React.ReactNode
23  className?: string
24  containerClassName?: string
25}) => {
26  const containerRef = useRef<HTMLDivElement>(null)
27  const [isMouseEntered, setIsMouseEntered] = useState(false)
28 
29  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
30    if (!containerRef.current) return
31    const { left, top, width, height } =
32      containerRef.current.getBoundingClientRect()
33    const x = (e.clientX - left - width / 2) / 25
34    const y = (e.clientY - top - height / 2) / 25
35    containerRef.current.style.transform = `rotateY(${x}deg) rotateX(${y}deg)`
36  }
37 
38  const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
39    setIsMouseEntered(true)
40    if (!containerRef.current) return
41  }
42 
43  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
44    if (!containerRef.current) return
45    setIsMouseEntered(false)
46    containerRef.current.style.transform = `rotateY(0deg) rotateX(0deg)`
47  }
48  return (
49    <MouseEnterContext.Provider value={[isMouseEntered, setIsMouseEntered]}>
50      <div
51        className={cn(
52          "flex items-center justify-center py-20",
53          containerClassName,
54        )}
55        style={{
56          perspective: "1000px",
57        }}
58      >
59        <div
60          ref={containerRef}
61          onMouseEnter={handleMouseEnter}
62          onMouseMove={handleMouseMove}
63          onMouseLeave={handleMouseLeave}
64          className={cn(
65            "relative flex items-center justify-center transition-all duration-200 ease-linear",
66            className,
67          )}
68          style={{
69            transformStyle: "preserve-3d",
70          }}
71        >
72          {children}
73        </div>
74      </div>
75    </MouseEnterContext.Provider>
76  )
77}
78 
79export const CardBody = ({
80  children,
81  className,
82}: {
83  children: React.ReactNode
84  className?: string
85}) => {
86  return (
87    <div
88      className={cn(
89        "h-96 w-96 [transform-style:preserve-3d] [&>*]:[transform-style:preserve-3d]",
90        className,
91      )}
92    >
93      {children}
94    </div>
95  )
96}
97 
98export const CardItem = ({
99  as: Tag = "div",
100  children,
101  className,
102  translateX = 0,
103  translateY = 0,
104// … truncated