Skip to content
hantui

Buttons & Actionsv0.1.0

Magnetic Button

Follows the cursor within a radius, then springs home.

Installation

CLI

npx shadcn@latest add https://hantui-theta.vercel.app/r/magnetic-button.json

Manual

  1. Install the dependencies

    npm install clsx motion tailwind-merge

  2. Add the shared helpers

    Components use cn() from lib/utils.ts and the motion tokens below. See Installation if you have not set them up yet.

    lib/motion.ts
    import type { Transition, Variants } from "motion/react";

/** Durations in seconds. */
export const duration = {
  instant: 0.1,
  quick: 0.18,
  base: 0.28,
  slow: 0.45,
} as const;

/** Cubic-bezier curves. */
export const ease = {
  /** Entering, UI response. */
  out: [0.22, 1, 0.36, 1],
  /** Moving on screen. */
  inOut: [0.65, 0, 0.35, 1],
  /** Sheets and the mobile menu. */
  drawer: [0.32, 0.72, 0, 1],
} as const;

/** Everyday UI: presses, icon swaps, popovers and modals. Exits run at `exitFactor` of the enter. */
export const ui = {
  press: { scale: 0.96, duration: 0.12 },
  icon: { type: "spring", duration: 0.3, bounce: 0 },
  popover: { duration: 0.18, ease: ease.out },
  modal: { duration: 0.24, ease: ease.out },
  exitFactor: 0.6,
} as const;

/** Once-per-visit motion on the landing page: hero letters, the reel and the afterimage. */
export const kinetic = {
  heroLetter: { duration: 0.6, ease: ease.out },
  /** Delay per letter, eased so the wave slows toward the end. */
  heroStep: 0.035,
  reelSwap: { type: "spring", duration: 0.5, bounce: 0.1 },
  /** Two afterimages: lag in seconds and opacity of each. */
  ghost: { lag: [0.04, 0.09], opacity: [0.14, 0.06] },
} as const;

/** Spring presets. */
export const spring = {
  snappy: { type: "spring", stiffness: 500, damping: 30 },
  smooth: { type: "spring", stiffness: 260, damping: 26 },
  bouncy: { type: "spring", stiffness: 300, damping: 15 },
} as const satisfies Record<string, Transition>;

/** Stagger between siblings, in seconds (0.03–0.06). */
export const stagger = {
  tight: 0.03,
  base: 0.045,
  loose: 0.06,
} as const;

/** Blur + fade + y-offset. Falls back to a plain fade under reduced motion. */
export function enterVariants(reduceMotion?: boolean | null, y = 8): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.base } },
      exit: { opacity: 0, transition: { duration: duration.quick } },
    };
  }
  return {
    hidden: { opacity: 0, y, filter: "blur(4px)" },
    visible: {
      opacity: 1,
      y: 0,
      filter: "blur(0px)",
      transition: { duration: duration.base, ease: ease.out },
    },
    exit: {
      opacity: 0,
      y: -y / 2,
      filter: "blur(4px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
  };
}

/** Scale 0.96 → 1 for popovers, menus and dialogs. */
export function overlayVariants(reduceMotion?: boolean | null): Variants {
  if (reduceMotion) {
    return {
      hidden: { opacity: 0 },
      visible: { opacity: 1, transition: { duration: duration.quick } },
      exit: { opacity: 0, transition: { duration: duration.instant } },
    };
  }
  return {
    hidden: { opacity: 0, scale: 0.96, filter: "blur(2px)" },
    visible: {
      opacity: 1,
      scale: 1,
      filter: "blur(0px)",
      transition: { duration: duration.quick, ease: ease.out },
    },
    exit: {
      opacity: 0,
      scale: 0.96,
      filter: "blur(2px)",
      transition: { duration: duration.instant + 0.02, ease: ease.out },
    },
  };
}

/** Parent variants that stagger their children in. */
export function staggerVariants(gap: number = stagger.base, delayChildren = 0): Variants {
  return {
    hidden: {},
    visible: { transition: { staggerChildren: gap, delayChildren } },
    exit: { transition: { staggerChildren: gap / 2, staggerDirection: -1 } },
  };
}

  3. Copy the source

    components/ui/magnetic-button/magnetic-button.tsx
    "use client";

import { useEffect, useRef, type ComponentProps } from "react";
import { motion, useMotionValue, useReducedMotion, useSpring, useTransform } from "motion/react";
import { cn } from "@/lib/utils";
import { spring } from "@/lib/motion";

export interface MagneticButtonProps
  extends Omit<ComponentProps<"button">, "onAnimationStart" | "onDrag" | "onDragStart" | "onDragEnd"> {
  /** Distance in px around the button where the pull begins. @default 80 */
  radius?: number;
  /** How far the button follows the cursor, as a fraction of the cursor's offset. @default 0.35 */
  strength?: number;
  /** Extra travel for the label on top of the button's, for a parallax feel. @default 0.4 */
  contentStrength?: number;
  /** Visual style. @default "solid" */
  variant?: "solid" | "primary" | "outline";
  /** Button size. @default "md" */
  size?: "sm" | "md" | "lg";
  /** Use "circle" for icon-only buttons. @default "default" */
  shape?: "default" | "circle";
}

const variantClasses = {
  solid:
    "bg-foreground text-background shadow-[inset_0_1px_0_rgb(255_255_255/0.14),0_1px_2px_rgb(0_0_0/0.14),0_4px_12px_-2px_rgb(0_0_0/0.12)] hover:bg-foreground/90",
  primary:
    "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.2),0_1px_2px_rgb(0_0_0/0.12),0_4px_12px_-2px_color-mix(in_oklab,var(--primary)_40%,transparent)] hover:bg-primary/90",
  outline: "border border-border bg-background text-foreground shadow-xs hover:bg-accent",
} as const;

const sizeClasses = {
  default: {
    sm: "h-8 gap-1.5 rounded-md px-3 text-[13px] after:absolute after:-inset-1 after:content-['']",
    md: "h-10 gap-2 rounded-md px-4 text-sm",
    lg: "h-12 gap-2 rounded-lg px-6 text-[15px]",
  },
  circle: {
    sm: "size-8 rounded-full after:absolute after:-inset-1 after:content-['']",
    md: "size-10 rounded-full",
    lg: "size-14 rounded-full [&_svg]:size-5",
  },
} as const;

/** Smoothstep easing so the pull fades in gently at the edge of the radius. */
function falloff(t: number) {
  const x = Math.min(Math.max(t, 0), 1);
  return x * x * (3 - 2 * x);
}

export function MagneticButton({
  radius = 80,
  strength = 0.35,
  contentStrength = 0.4,
  variant = "solid",
  size = "md",
  shape = "default",
  type = "button",
  className,
  children,
  ...props
}: MagneticButtonProps) {
  const anchorRef = useRef<HTMLSpanElement>(null);
  const reduceMotion = useReducedMotion();
  const pullX = useMotionValue(0);
  const pullY = useMotionValue(0);
  const x = useSpring(pullX, { stiffness: 220, damping: 18, mass: 0.6 });
  const y = useSpring(pullY, { stiffness: 220, damping: 18, mass: 0.6 });
  const contentX = useTransform(x, (v) => v * contentStrength);
  const contentY = useTransform(y, (v) => v * contentStrength);

  useEffect(() => {
    // Magnetism only makes sense for a hovering, precise pointer.
    if (reduceMotion || !window.matchMedia("(hover: hover) and (pointer: fine)").matches) return;

    let frame = 0;
    let pointer: { x: number; y: number } | null = null;

    const update = () => {
      frame = 0;
      const anchor = anchorRef.current;
      if (!anchor || !pointer) return;
      // The anchor never moves, so its rect is a stable reference point.
      const rect = anchor.getBoundingClientRect();
      const dx = pointer.x - (rect.left + rect.width / 2);
      const dy = pointer.y - (rect.top + rect.height / 2);
      const edgeDistance = Math.max(Math.abs(dx) - rect.width / 2, Math.abs(dy) - rect.height / 2, 0);
      const pull = falloff(1 - edgeDistance / radius);
      pullX.set(dx * strength * pull);
      pullY.set(dy * strength * pull);
    };

    const onMove = (event: PointerEvent) => {
      if (event.pointerType !== "mouse") return;
      pointer = { x: event.clientX, y: event.clientY };
      if (!frame) frame = window.requestAnimationFrame(update);
    };
    const reset = () => {
      pointer = null;
      pullX.set(0);
      pullY.set(0);
    };

    window.addEventListener("pointermove", onMove, { passive: true });
    document.documentElement.addEventListener("pointerleave", reset);
    window.addEventListener("blur", reset);
    return () => {
      window.cancelAnimationFrame(frame);
      window.removeEventListener("pointermove", onMove);
      document.documentElement.removeEventListener("pointerleave", reset);
      window.removeEventListener("blur", reset);
      reset();
    };
  }, [radius, strength, reduceMotion, pullX, pullY]);

  return (
    <span ref={anchorRef} className="relative inline-flex">
      <motion.button
        type={type}
        style={{ x, y }}
        whileTap={reduceMotion ? { opacity: 0.8 } : { scale: 0.96 }}
        transition={spring.snappy}
        className={cn(
          "relative inline-flex shrink-0 cursor-pointer items-center justify-center font-medium whitespace-nowrap outline-none select-none",
          "transition-[background-color,border-color,color,box-shadow] duration-150",
          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
          "disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
          variantClasses[variant],
          sizeClasses[shape][size],
          className,
        )}
        {...props}
      >
        <motion.span style={{ x: contentX, y: contentY }} className="inline-flex items-center gap-[inherit]">
          {children}
        </motion.span>
      </motion.button>
    </span>
  );
}

Usage

import { MagneticButton } from "@/components/ui/magnetic-button/magnetic-button";

export function Cta() {
  return <MagneticButton size="lg">Book a demo</MagneticButton>;
}

API reference

PropTypeDefaultDescription
radiusnumber80Distance in px around the button where the pull begins.
strengthnumber0.35How far the button follows the cursor, as a fraction of the cursor's offset.
contentStrengthnumber0.4Extra travel for the label on top of the button's, for a parallax feel.
variant"solid" | "primary" | "outline""solid"Visual style.
size"sm" | "md" | "lg""md"Button size.
shape"default" | "circle""default"Use "circle" for icon-only buttons.

Also accepts every native <button> attribute, including ref and className.

  • The pull fades in with a smoothstep curve from the edge of `radius`, so the button never jumps when the cursor enters the field.
  • One passive, rAF-throttled pointermove listener is added per button and removed on unmount.

Accessibility

  • Renders a native button; the magnetic movement is purely visual and never changes the focus order or hit target.
  • Magnetism only runs for a mouse on devices that support hover. Touch and pen users get a regular button.
  • With reduced motion enabled, the button stays still and pressing dims it instead of scaling.