Simon
102 lines
2.7 KiB
TypeScript
102 lines
2.7 KiB
TypeScript
import { motion, useMotionTemplate, useMotionValue } from 'motion/react'
|
|
import React, { useCallback, useEffect } 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 = '#262626',
|
|
gradientOpacity = 0.8,
|
|
gradientFrom = '#9E7AFF',
|
|
gradientTo = '#FE8BBB',
|
|
}: MagicCardProps) {
|
|
const mouseX = useMotionValue(-gradientSize)
|
|
const mouseY = useMotionValue(-gradientSize)
|
|
const reset = useCallback(() => {
|
|
mouseX.set(-gradientSize)
|
|
mouseY.set(-gradientSize)
|
|
}, [gradientSize, mouseX, mouseY])
|
|
|
|
const handlePointerMove = useCallback(
|
|
(e: React.PointerEvent<HTMLDivElement>) => {
|
|
const rect = e.currentTarget.getBoundingClientRect()
|
|
mouseX.set(e.clientX - rect.left)
|
|
mouseY.set(e.clientY - rect.top)
|
|
},
|
|
[mouseX, mouseY]
|
|
)
|
|
|
|
useEffect(() => {
|
|
reset()
|
|
}, [reset])
|
|
|
|
useEffect(() => {
|
|
const handleGlobalPointerOut = (e: PointerEvent) => {
|
|
if (!e.relatedTarget) {
|
|
reset()
|
|
}
|
|
}
|
|
|
|
const handleVisibility = () => {
|
|
if (document.visibilityState !== 'visible') {
|
|
reset()
|
|
}
|
|
}
|
|
|
|
window.addEventListener('pointerout', handleGlobalPointerOut)
|
|
window.addEventListener('blur', reset)
|
|
document.addEventListener('visibilitychange', handleVisibility)
|
|
|
|
return () => {
|
|
window.removeEventListener('pointerout', handleGlobalPointerOut)
|
|
window.removeEventListener('blur', reset)
|
|
document.removeEventListener('visibilitychange', handleVisibility)
|
|
}
|
|
}, [reset])
|
|
|
|
return (
|
|
<div
|
|
className={cn('group relative rounded-[inherit]', className)}
|
|
onPointerMove={handlePointerMove}
|
|
onPointerLeave={reset}
|
|
onPointerEnter={reset}
|
|
>
|
|
<motion.div
|
|
className="bg-border pointer-events-none absolute inset-0 rounded-[inherit] 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-white dark:bg-neutral-900" />
|
|
<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>
|
|
)
|
|
}
|