Component

Mouse Follower

The Mouse Follower Element is a dynamic UI component that enhances user interaction by smoothly tracking and following the user's mouse movements across the screen. Built with React and Framer Motion, this element adds a modern and engaging effect to your website, providing a more interactive and visually appealing experience for users.

Features

  • ▸Smooth Tracking: Utilizes Framer Motions useSpring hook to ensure fluid and natural movement that closely follows the user's cursor, creating a seamless and responsive interaction.
  • ▸Customizable Appearance: Easily customizable size, color, and shape to fit the design and aesthetic of any website.
  • ▸Non-intrusive: Implemented with pointerEvents: 'none' to ensure it does not interfere with other interactive elements on the page, maintaining the full functionality of underlying content.
  • ▸Lightweight: Minimal impact on performance, ensuring that it enhances the user experience without slowing down the website.

Move your mouse around!

Installation

01.Install Dependencies

npm install motion
Source Code
'use client';
import { useEffect, useRef } from 'react';
import { motion, useMotionValue, useSpring } from 'motion/react';

export default function MouseFollower() {
  const cursor = useRef(null);
  const cursorSize = 15;
  const mouse = {
    x: useMotionValue(0),
    y: useMotionValue(0)
  };

  // Smooth out the mouse values
  const smoothOptions = { damping: 20, stiffness: 300, mass: 0.5 };
  const smoothMouse = {
    x: useSpring(mouse.x, smoothOptions),
    y: useSpring(mouse.y, smoothOptions)
  };

  const manageMouseMove = (e) => {
    const { clientX, clientY } = e;
    // Move custom cursor to follow the mouse
    mouse.x.set(clientX - cursorSize / 2);
    mouse.y.set(clientY - cursorSize / 2);
  };

  useEffect(() => {
    window.addEventListener('mousemove', manageMouseMove);
    return () => {
      window.removeEventListener('mousemove', manageMouseMove);
    };
  }, []);

  return (
    <div>
      <motion.div
        style={{
          left: smoothMouse.x,
          top: smoothMouse.y,
          pointerEvents: 'none',
          width: cursorSize,
          height: cursorSize
        }}
        className={`h-4 w-4 fixed rounded-full bg-white z-[9999]`}
        ref={cursor}
      ></motion.div>
    </div>
  );
}
sparkui