Magnetic

Buttons 80

About

A magnetic effect for elements that allows them to be attracted to the mouse cursor.

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

Code

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

Usage.tsx

import { Magnetic } from '@/components/ui/magnetic';

function MagneticBasic() {
  return (
    <Magnetic>
      <button
        type='button'
        className='inline-flex items-center rounded-md border border-zinc-100 bg-transparent px-4 py-2 text-sm text-zinc-950 transition-all duration-300 hover:bg-zinc-100 dark:border-zinc-900 dark:bg-transparent dark:text-zinc-50 dark:hover:bg-zinc-600'
      >
        <span>Submit</span>
      </button>
    </Magnetic>
  );
}

export { MagneticBasic }