Magnetic

Buttons

About

Add smooth magnetic attraction effects for any HTML elements.

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";

export default function DemoOne() {
  return (
        <div className="h-screen w-full flex items-center justify-center bg-slate-50">
            <Magnetic distance={50} attraction={0.5}>
                <button
                    className="relative inline-flex items-center justify-center px-8 py-4 rounded-2xl bg-blue-600 hover:bg-blue-700 text-white font-bold shadow-lg shadow-blue-500/50 transition-colors duration-200"
                >
                    HOVER ON ME
                </button>
            </Magnetic>
        </div>
    );
}