107 lines
3.0 KiB
TypeScript
107 lines
3.0 KiB
TypeScript
"use client"
|
|
|
|
import { motion, useMotionTemplate, useMotionValue } from "motion/react"
|
|
import type React from "react"
|
|
import { useCallback, useEffect, useRef } from "react"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface MagicCardProps {
|
|
children?: React.ReactNode
|
|
className?: string
|
|
gradientSize?: number
|
|
gradientColor?: string
|
|
gradientOpacity?: number
|
|
gradientFrom?: string
|
|
gradientTo?: string
|
|
}
|
|
|
|
export function MagicCard({
|
|
children,
|
|
className,
|
|
gradientSize = 200,
|
|
gradientColor = "",
|
|
gradientOpacity = 0.8,
|
|
gradientFrom = "#ff0a54",
|
|
gradientTo = "#f9bec7",
|
|
}: MagicCardProps) {
|
|
const cardRef = useRef<HTMLDivElement>(null)
|
|
const mouseX = useMotionValue(-gradientSize)
|
|
const mouseY = useMotionValue(-gradientSize)
|
|
|
|
const handleMouseMove = useCallback(
|
|
(e: MouseEvent) => {
|
|
if (cardRef.current) {
|
|
const { left, top } = cardRef.current.getBoundingClientRect()
|
|
const clientX = e.clientX
|
|
const clientY = e.clientY
|
|
mouseX.set(clientX - left)
|
|
mouseY.set(clientY - top)
|
|
}
|
|
},
|
|
[mouseX, mouseY],
|
|
)
|
|
|
|
const handleMouseOut = useCallback(
|
|
(e: MouseEvent) => {
|
|
if (!e.relatedTarget) {
|
|
document.removeEventListener("mousemove", handleMouseMove)
|
|
mouseX.set(-gradientSize)
|
|
mouseY.set(-gradientSize)
|
|
}
|
|
},
|
|
[handleMouseMove, mouseX, gradientSize, mouseY],
|
|
)
|
|
|
|
const handleMouseEnter = useCallback(() => {
|
|
document.addEventListener("mousemove", handleMouseMove)
|
|
mouseX.set(-gradientSize)
|
|
mouseY.set(-gradientSize)
|
|
}, [handleMouseMove, mouseX, gradientSize, mouseY])
|
|
|
|
useEffect(() => {
|
|
document.addEventListener("mousemove", handleMouseMove)
|
|
document.addEventListener("mouseout", handleMouseOut)
|
|
document.addEventListener("mouseenter", handleMouseEnter)
|
|
|
|
return () => {
|
|
document.removeEventListener("mousemove", handleMouseMove)
|
|
document.removeEventListener("mouseout", handleMouseOut)
|
|
document.removeEventListener("mouseenter", handleMouseEnter)
|
|
}
|
|
}, [handleMouseEnter, handleMouseMove, handleMouseOut])
|
|
|
|
useEffect(() => {
|
|
mouseX.set(-gradientSize)
|
|
mouseY.set(-gradientSize)
|
|
}, [gradientSize, mouseX, mouseY])
|
|
|
|
return (
|
|
<div ref={cardRef} className={cn("group relative rounded-[inherit]", className)}>
|
|
<motion.div
|
|
className="pointer-events-none absolute inset-0 rounded-[inherit] bg-border duration-300 group-hover:opacity-100"
|
|
style={{
|
|
background: useMotionTemplate`
|
|
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px,
|
|
${gradientFrom},
|
|
${gradientTo},
|
|
var(--border) 100%
|
|
)
|
|
`,
|
|
}}
|
|
/>
|
|
<div className="absolute inset-px rounded-[inherit] bg-background" />
|
|
<motion.div
|
|
className="pointer-events-none absolute inset-px rounded-[inherit] opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
|
style={{
|
|
background: useMotionTemplate`
|
|
radial-gradient(${gradientSize}px circle at ${mouseX}px ${mouseY}px, ${gradientColor}, transparent 100%)
|
|
`,
|
|
opacity: gradientOpacity,
|
|
}}
|
|
/>
|
|
<div className="relative">{children}</div>
|
|
</div>
|
|
)
|
|
}
|