Loading effect…
Loading preview…
buttons · react · free
A button that gently follows the pointer for a magnetic feel. Sample: free + live + inline + react.
"use client";
import {
useCallback,
useEffect,
useRef,
useState,
type CSSProperties,
type PointerEvent,
type ReactNode,
} from "react";
type MagneticButtonProps = {
children?: ReactNode;
className?: string;
strength?: number;
};
export function MagneticButton({
children = "Magnetic Button",A button that gently follows the pointer for a magnetic feel.
Copy src/MagneticButton.tsx into your React project. No extra dependencies.
import { MagneticButton } from "./MagneticButton";
export function Example() {
return <MagneticButton>Get started</MagneticButton>;
}"use client")prefers-reduced-motion