Magnetic Animation

FREE

A magnetic animation for elements

Demo

Magnetic subtle
Exclusive Launch 50% offspots left: 0 / 50
3D Cube - happy face3D Cube - Happy Face
$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.

magnetic-animation.tsx
"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:

PropertyTypeDefaultDescription
childrenReactNode-The content to animate
activebooleantrueWhether the animation is active
classNamestring""Additional CSS classes
strengthnumber1The strength of the animation
radiusnumber100The radius of the animation
smoothnumber0.2The smoothness of the animation

Usage Examples

Magnetic subtle
Magnetic medium
Magnetic strong