MagneticButton

magneticbutton-1779354163679.tsx

'use client';

import React, { useState, useEffect } from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children }) => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [cursorX, setCursorX] = useState(0);
  const [cursorY, setCursorY] = useState(0);

  const handleMouseMove = (e: React.MouseEvent) => {
    setCursorX(e.clientX);
    setCursorY(e.clientY);
  };

  useEffect(() => {
    const handleAnimation = () => {
      const distanceX = cursorX - x;
      const distanceY = cursorY - y;
      setX(x + distanceX * 0.1);
      setY(y + distanceY * 0.1);
    };
    const animationId = requestAnimationFrame(handleAnimation);
    return () => cancelAnimationFrame(animationId);
  }, [x, y, cursorX, cursorY]);

  return (
    <div
      className="relative w-40 h-12 bg-zinc-950 rounded-lg"
      onMouseMove={handleMouseMove}
    >
      <div
        className="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-[#C9A84C] to-[#F7D2C4] rounded-lg"
        style={{
          transform: `translate3d(${x}px, ${y}px, 0)`,
          transition: 'transform 0.1s ease-out',
        }}
      >
        {children}
      </div>
    </div>
  );
};

export default MagneticButton;

Component info

CategoryButtons

Frameworkreact

TierFREE

Copies0

About

Button with magnetic cursor attraction effect

More from Buttons

import { motion, useMotionValue, useSpring } from 'framer-motion';
import React from 'react';

interface MagneticButtonProps {
  children: React.ReactNode;
  className?: string;
}

const MagneticButton: React.FC<MagneticButtonProps> = ({ children, cl

MagneticButton

Buttons

'use client';

import { useState } from 'react';

interface GlowButtonProps {
  children: React.ReactNode;
}

const GlowButton: React.FC<GlowButtonProps> = ({ children }) => {
  const [isHovered, setIsHovered] = useState(false);

  const handleMouseE

GlowButton

Buttons

'use client';

import { useState } from 'react';

interface LoadingButtonProps {
  onClick: () => void;
}

const LoadingButton = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);

  cons

LoadingButton

Buttons

import React from 'react';
import { motion } from 'framer-motion';

interface LiquidButtonProps {
  children: React.ReactNode;
}

const LiquidButton: React.FC<LiquidButtonProps> = ({ children }) => {
  return (
    <motion.button
      whileHover={{

LiquidButton

Buttons