62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import { useRef, useState, useEffect } from "react";
|
|
import { motion, useMotionValue, useMotionTemplate } from "motion/react";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
const CHARS = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
const randomChars = () => Array.from({ length: 1500 }, () => CHARS[Math.floor(Math.random() * 62)]).join("");
|
|
|
|
interface HoverPatternProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
const HoverPattern = ({ children, className = "" }: HoverPatternProps) => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const x = useMotionValue(0);
|
|
const y = useMotionValue(0);
|
|
const [chars, setChars] = useState(randomChars);
|
|
const [isMobile, setIsMobile] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkMobile = () => setIsMobile(window.innerWidth < 768);
|
|
checkMobile();
|
|
window.addEventListener("resize", checkMobile);
|
|
return () => window.removeEventListener("resize", checkMobile);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (isMobile && ref.current) {
|
|
x.set(ref.current.offsetWidth / 2);
|
|
y.set(ref.current.offsetHeight / 2);
|
|
}
|
|
}, [isMobile, x, y]);
|
|
|
|
const mask = useMotionTemplate`radial-gradient(${isMobile ? 110 : 250}px at ${x}px ${y}px, white, transparent)`;
|
|
const base = "absolute inset-0 rounded-[inherit] transition-opacity duration-300";
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cls("group/pattern relative", className)}
|
|
onMouseMove={isMobile ? undefined : (e) => {
|
|
if (!ref.current) return;
|
|
const rect = ref.current.getBoundingClientRect();
|
|
x.set(e.clientX - rect.left);
|
|
y.set(e.clientY - rect.top);
|
|
setChars(randomChars());
|
|
}}
|
|
>
|
|
{children}
|
|
<div className="pointer-events-none absolute inset-0 rounded-[inherit]">
|
|
<div className={cls(base, isMobile ? "opacity-25" : "opacity-0 group-hover/pattern:opacity-25")} style={{ background: "linear-gradient(white, transparent)" }} />
|
|
<motion.div className={cls(base, "bg-linear-to-r from-accent to-accent/50 backdrop-blur-xl", isMobile ? "opacity-100" : "opacity-0 group-hover/pattern:opacity-100")} style={{ maskImage: mask, WebkitMaskImage: mask }} />
|
|
<motion.div className={cls(base, "mix-blend-overlay", isMobile ? "opacity-100" : "opacity-0 group-hover/pattern:opacity-100")} style={{ maskImage: mask, WebkitMaskImage: mask }}>
|
|
<p className="absolute inset-0 h-full whitespace-pre-wrap wrap-break-word font-mono text-xs font-bold text-white">{chars}</p>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HoverPattern;
|