64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useRef, useState } from "react";
|
||
|
|
import { motion } from "motion/react";
|
||
|
|
|
||
|
|
export const MagneticButton = ({
|
||
|
|
children,
|
||
|
|
strength = 0.8,
|
||
|
|
maxDistance = 100,
|
||
|
|
}: {
|
||
|
|
children: React.ReactNode;
|
||
|
|
strength?: number;
|
||
|
|
maxDistance?: number;
|
||
|
|
}) => {
|
||
|
|
const ref = useRef<HTMLDivElement>(null);
|
||
|
|
const [position, setPosition] = useState({ x: 0, y: 0 });
|
||
|
|
|
||
|
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||
|
|
if (!ref.current) return;
|
||
|
|
|
||
|
|
const { width, height, left, top } = ref.current.getBoundingClientRect();
|
||
|
|
const { clientX, clientY } = e;
|
||
|
|
|
||
|
|
let x = (clientX - (left + width / 2)) * strength;
|
||
|
|
let y = (clientY - (top + height / 2)) * strength;
|
||
|
|
|
||
|
|
const distance = Math.hypot(x, y);
|
||
|
|
if (distance > maxDistance) {
|
||
|
|
const scale = maxDistance / distance;
|
||
|
|
x *= scale;
|
||
|
|
y *= scale;
|
||
|
|
}
|
||
|
|
|
||
|
|
setPosition({ x, y });
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleMouseLeave = () => {
|
||
|
|
setPosition({ x: 0, y: 0 });
|
||
|
|
};
|
||
|
|
|
||
|
|
const hasMoved = position.x !== 0 || position.y !== 0;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onMouseMove={handleMouseMove}
|
||
|
|
onMouseLeave={handleMouseLeave}
|
||
|
|
className="cursor-pointer rounded-lg border border-dashed transition-colors duration-150 [--show-color:var(--color-blue-500)]"
|
||
|
|
style={{
|
||
|
|
borderColor: hasMoved ? "var(--show-color)" : "transparent",
|
||
|
|
backgroundColor: hasMoved
|
||
|
|
? "color-mix(in srgb,var(--show-color) 20%, transparent)"
|
||
|
|
: "transparent",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<motion.div
|
||
|
|
ref={ref}
|
||
|
|
animate={{ x: position.x, y: position.y }}
|
||
|
|
transition={{ type: "spring", stiffness: 150, damping: 25, mass: 0.1 }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|