Component

Magnetic Effect

The Magnetic Effect Component is a dynamic and interactive UI element designed to enhance user engagement by creating a magnet-like attraction effect. As users move their cursor near the component, it smoothly follows the cursor, creating a captivating and fluid motion. This effect can add a playful and modern touch to various elements such as buttons, images, and cards, making them stand out and inviting users to interact.

Features

  • ▸Smooth Interaction: The component uses Framer Motion's spring physics to create a smooth and natural motion, enhancing the overall user experience.
  • ▸Customizable Parameters: Easily adjustable parameters such as stiffness, damping, and mass allow you to fine-tune the motion to suit your design needs.
  • ▸Ease of Use: Simple to integrate into any React application, with minimal setup required.
  • ▸Engaging Visuals: Adds a modern and interactive visual effect that can make UI elements more appealing and noticeable.
  • ▸ Non-Intrusive: The magnetic effect is subtle and non-intrusive, ensuring it enhances user experience without being distracting.
Installation

01.Install Dependencies

npm install gsap
Source Code

import React, { useEffect, useRef } from 'react'
import gsap from 'gsap';

export default function Magnetic({children}) {
    const magnetic = useRef(null);

    useEffect( () => {
        const xTo = gsap.quickTo(magnetic.current, "x", {duration: 1, ease: "elastic.out(1, 0.3)"})
        const yTo = gsap.quickTo(magnetic.current, "y", {duration: 1, ease: "elastic.out(1, 0.3)"})

        magnetic.current.addEventListener("mousemove", (e) => {
            const { clientX, clientY } = e;
            const {height, width, left, top} = magnetic.current.getBoundingClientRect();
            const x = clientX - (left + width/2)
            const y = clientY - (top + height/2)
            xTo(x);
            yTo(y)
        })
        magnetic.current.addEventListener("mouseleave", (e) => {
            xTo(0);
            yTo(0)
        })
    }, [])

    return (
        React.cloneElement(children, {ref:magnetic})
    )
}
sparkui