SparkUI

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.
  • Hover over the elements to see the effects

    Install Dependencies
    npm install gsap
    Copy the Source code`components/ui/magnetic-effect.jsx`
    
    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