Magnet hover

Buttons 8

About

A minimalistic magnetic hover animation

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magnet hover to your project and fits it to your theme.

Code

How Magnet hover is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Magnet } from "@/components/ui/magnet-hover"; 

const DemoOne = () => {
  const magnetPadding: number = 50;
  const isMagnetDisabled: boolean = false;
  const strengthOfMagnet: number = 4; 

  const buttonBaseClasses = "px-10 py-5 rounded-2xl text-xl font-semibold text-center transition-colors duration-300";
  
  return (
    <div className="flex flex-col w-full min-h-screen justify-center items-center 
                   p-4
                   bg-white text-black // Light mode: white bg, black text for page
                   dark:bg-black dark:text-white // Dark mode: black bg, white text for page
                   transition-colors duration-300">
      
      <Magnet
        padding={magnetPadding}
        disabled={isMagnetDisabled}
        magnetStrength={strengthOfMagnet}
      >
        <div className={`
          ${buttonBaseClasses} 
          bg-white text-black border border-neutral-300 
          dark:bg-black dark:text-white dark:border-neutral-700
        `}>
          Hover Me!
        </div>
      </Magnet>
      
    </div>
  );
};

export { DemoOne };