'use client' import { useMotionValue, motion, useSpring, useTransform } from "framer-motion"; import { ArrowRight } from "lucide-react"; import React, { useRef } from "react"; const HoverImageLinks = () => { return (

); }; interface LinkProps { heading: string; imgSrc: string; subheading: string; href: string; } const Link = ({ heading, imgSrc, subheading, href }: LinkProps) => { const ref = useRef(null); const x = useMotionValue(0); const y = useMotionValue(0); const mouseXSpring = useSpring(x); const mouseYSpring = useSpring(y); const top = useTransform(mouseYSpring, [0.5, -0.5], ["40%", "60%"]); const left = useTransform(mouseXSpring, [0.5, -0.5], ["60%", "70%"]); const handleMouseMove = ( e: React.MouseEvent ) => { const rect = ref.current!.getBoundingClientRect(); const width = rect.width; const height = rect.height; const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; const xPct = mouseX / width - 0.5; const yPct = mouseY / height - 0.5; x.set(xPct); y.set(yPct); }; return (

{heading.split("").map((l, i) => ( {l} ))} {subheading}

); }; export default HoverImageLinks;

Cool hover link

Flip Link

Hover Image Links