Magnetic Button
A Magnetic Button is a UI component designed to enhance user interaction. When a user's cursor or touch input approaches the button, it subtly moves towards the user, simulating the effect of magnetic attraction.
import MagneticButton from "@/components/core/magnetic-button";
import {Button} from "@/components/ui/button";
export default function MagneticButtonExample() {
return (
<MagneticButton>
<Button size="lg">Magnetic Button</Button>
</MagneticButton>
);
}
Installation
Install the following dependencies:
npm install motion
Copy and paste the following code into your project:
"use client";
import React, { useState, useEffect, useRef } from "react";
import { motion, useMotionValue, useSpring } from "motion/react";
const SPRING_CONFIG = { damping: 100, stiffness: 400 };
type MagneticButtonType = {
children: React.ReactNode;
distance?: number;
};
function MagneticButton({ children, distance = 0.6 }: MagneticButtonType) {
const [isHovered, setIsHovered] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const x = useMotionValue(0);
const y = useMotionValue(0);
const springX = useSpring(x, SPRING_CONFIG);
const springY = useSpring(y, SPRING_CONFIG);
useEffect(() => {
const calculateDistance = (e: MouseEvent) => {
if (ref.current) {
const rect = ref.current.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
const distanceX = e.clientX - centerX;
const distanceY = e.clientY - centerY;
if (isHovered) {
x.set(distanceX * distance);
y.set(distanceY * distance);
} else {
x.set(0);
y.set(0);
}
}
};
document.addEventListener("mousemove", calculateDistance);
return () => {
document.removeEventListener("mousemove", calculateDistance);
};
}, [ref, isHovered]);
return (
<motion.div
ref={ref}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{
x: springX,
y: springY,
}}
>
{children}
</motion.div>
);
}
export default MagneticButton;
Update the import paths to match your project setup.
Usage
import MagneticButton from "@/components/core/magnetic-button";
import {Button} from "@/components/ui/button";
export default function MagneticButtonExample() {
return (
<MagneticButton>
<Button size="lg">Magnetic Button</Button>
</MagneticButton>
);
}
Props
Prop | Type | Default |
---|---|---|
distance? | number | 0.6 |
children | ReactNode | - |
Text Morph Animation
A beautiful text transformation effect. The animation uses SVG filters and blur effects to create smooth transitions between words.
Marquee Effect
Add dynamic movement to your UI with Marquee effect, ideal for highlighting important information with smooth, continuous scrolling. Built with Tailwind CSS and Motion.