Comet Card

1"use client";
2import React, { useRef } from "react";
3import {
4  motion,
5  useMotionValue,
6  useSpring,
7  useTransform,
8  useMotionTemplate,
9} from "motion/react";
10import { cn } from "@/lib/utils";
11 
12export const CometCard = ({
13  rotateDepth = 17.5,
14  translateDepth = 20,
15  className,
16  children,
17}: {
18  rotateDepth?: number;
19  translateDepth?: number;
20  className?: string;
21  children: React.ReactNode;
22}) => {
23  const ref = useRef<HTMLDivElement>(null);
24 
25  const x = useMotionValue(0);
26  const y = useMotionValue(0);
27 
28  const mouseXSpring = useSpring(x);
29  const mouseYSpring = useSpring(y);
30 
31  const rotateX = useTransform(
32    mouseYSpring,
33    [-0.5, 0.5],
34    [`-${rotateDepth}deg`, `${rotateDepth}deg`],
35  );
36  const rotateY = useTransform(
37    mouseXSpring,
38    [-0.5, 0.5],
39    [`${rotateDepth}deg`, `-${rotateDepth}deg`],
40  );
41 
42  const translateX = useTransform(
43    mouseXSpring,
44    [-0.5, 0.5],
45    [`-${translateDepth}px`, `${translateDepth}px`],
46  );
47  const translateY = useTransform(
48    mouseYSpring,
49    [-0.5, 0.5],
50    [`${translateDepth}px`, `-${translateDepth}px`],
51  );
52 
53  const glareX = useTransform(mouseXSpring, [-0.5, 0.5], [0, 100]);
54  const glareY = useTransform(mouseYSpring, [-0.5, 0.5], [0, 100]);
55 
56  const glareBackground = useMotionTemplate`radial-gradient(circle at ${glareX}% ${glareY}%, rgba(255, 255, 255, 0.9) 10%, rgba(255, 255, 255, 0.75) 20%, rgba(255, 255, 255, 0) 80%)`;
57 
58  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
59    if (!ref.current) return;
60 
61    const rect = ref.current.getBoundingClientRect();
62 
63    const width = rect.width;
64    const height = rect.height;
65 
66    const mouseX = e.clientX - rect.left;
67    const mouseY = e.clientY - rect.top;
68 
69    const xPct = mouseX / width - 0.5;
70    const yPct = mouseY / height - 0.5;
71 
72    x.set(xPct);
73    y.set(yPct);
74  };
75 
76  const handleMouseLeave = () => {
77    x.set(0);
78    y.set(0);
79  };
80 
81  return (
82    <div className={cn("perspective-distant transform-3d", className)}>
83      <motion.div
84        ref={ref}
85        onMouseMove={handleMouseMove}
86        onMouseLeave={handleMouseLeave}
87        style={{
88          rotateX,
89          rotateY,
90          translateX,
91          translateY,
92          boxShadow:
93            "rgba(0, 0, 0, 0.01) 0px 520px 146px 0px, rgba(0, 0, 0, 0.04) 0px 333px 133px 0px, rgba(0, 0, 0, 0.26) 0px 83px 83px 0px, rgba(0, 0, 0, 0.29) 0px 21px 46px 0px",
94        }}
95        initial={{ scale: 1, z: 0 }}
96        whileHover={{
97          scale: 1.05,
98// … truncated