Magnetic button
A pointer-responsive action that settles smoothly back into place.
Implementation
1"use client";2 3import {4 useRef,5 useState,6 type ButtonHTMLAttributes,7 type CSSProperties,8 type ReactNode,9} from "react";10 11export type MagneticButtonProps = Omit<12 ButtonHTMLAttributes<HTMLButtonElement>,13 "children"14> & {15 children: ReactNode;16 strength?: number;17 tone?: "blue" | "ink";18};19 20/** A native button that follows the pointer slightly, then settles at rest. */21export function MagneticButton({22 children,23 strength = 12,24 tone = "blue",25 className = "",26 style,27 onPointerMove,28 onPointerLeave,