3d-card

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          "py-20 flex items-center justify-center",
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            "flex items-center justify-center relative 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// … truncated