Magnetic Animation
FREE
A magnetic animation for elements
Demo
Magnetic subtle
Exclusive Launch 50% offspots left: 0 / 50


$39.99
$19.99
Payment once and get lifetime access
Access to all animations
All updates
All animations
No subscriptions
Installation
1
Copy and paste the following code into your project.
Add this component magnetic-animation.tsx to your project.
"use client";
import type React from "react";
import type { ReactNode } from "react";
import { useState, useRef } from "react";
interface MagneticAnimationProps {
children: ReactNode;
active?: boolean;
className?: string;
strength?: number;
radius?: number;
smooth?: number;
}
export function MagneticAnimation({
children,
active = true,
className = "",
strength = 1,
radius = 100,
smooth = 0.2,
}: MagneticAnimationProps) {
const [position, setPosition] = useState({ x: 0, y: 0 });
const elementRef = useRef<HTMLDivElement>(null);
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
if (!active || !elementRef.current) return;
const { clientX, clientY } = e;
const { left, top, width, height } =
elementRef.current.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const distanceX = clientX - centerX;
const distanceY = clientY - centerY;
const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
// If the cursor is within the action radius
if (distance < radius) {
// Calculate the force based on the distance (closer = stronger)
const power = 1 - distance / radius;
// Apply the magnetic effect
setPosition({
x: distanceX * power * strength,
y: distanceY * power * strength,
});
} else {
// Gradually return to the original position
setPosition((prev) => ({
x: prev.x * (1 - smooth),
y: prev.y * (1 - smooth),
}));
}
};
const handleMouseLeave = () => {
// Return to the original position
setPosition({ x: 0, y: 0 });
};
return (
<div
ref={elementRef}
className={`${className}`}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
>
<div
style={{
transform: `translate(${position.x}px, ${position.y}px)`,
transition: "transform 0.2s cubic-bezier(0.23, 1, 0.32, 1)",
}}
>
{children}
</div>
</div>
);
}
2
Start using the component
<MagneticAnimation
className="w-40 h-40 bg-gradient-to-br from-amber-500 to-red-500 rounded-xl flex items-center justify-center"
strength={2}
>
<span className="text-white font-bold">Magnetic strong</span>
</MagneticAnimation>
3
Update the import paths to match your project setup.
Usage Example
<MagneticAnimation
className="w-40 h-40 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center"
strength={0.5}
>
<span className="text-white font-bold">Subtle</span>
</MagneticAnimation>
// ------------------------------------------------------------
<MagneticAnimation
className="w-40 h-40 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center"
strength={1}
>
<span className="text-white font-bold">Medium</span>
</MagneticAnimation>
// ------------------------------------------------------------
<MagneticAnimation
className="w-40 h-40 bg-gradient-to-br from-amber-500 to-red-500 rounded-xl flex items-center justify-center"
strength={2}
>
<span className="text-white font-bold">Strong</span>
</MagneticAnimation>
Properties
The MagneticAnimation
component accepts the following props:
Property | Type | Default | Description |
---|---|---|---|
children | ReactNode | - | The content to animate |
active | boolean | true | Whether the animation is active |
className | string | "" | Additional CSS classes |
strength | number | 1 | The strength of the animation |
radius | number | 100 | The radius of the animation |
smooth | number | 0.2 | The smoothness of the animation |
Usage Examples
Magnetic subtle
Magnetic medium
Magnetic strong