hover-ui
Install

Magnet

A dot with a pull: over anything clickable, the control leans toward the pointer and the dot settles between them.

npx shadcn@latest add https://hoverui.fun/r/magnet.json

Adds components/cursors/magnet.tsx. The CLI also installs the useCursor hook it runs on, once, into your hooks folder. The files are yours from there.

Move through the preview, then hover the controls and press.

All cursors
Kind
Followers
Hook
useCursor
Dependencies
None
License
MIT

Usage

Any element
import { MagnetCursor } from "@/components/cursors/magnet";

export function Section() {
  return (
    <section>
      <MagnetCursor />
      {/* this section now wears Magnet */}
    </section>
  );
}

Put it inside <body> in your root layout to wear it on every page. Nested cursors take over inside their own element.

Props

className
Colors the cursor through currentColor, e.g. text-pink-500. To read on any background, pass text-white mix-blend-difference, as this site does.
Hover targets
a, button, input, select, textarea, label, [role=button], [data-cursor-label]

Source

magnet.tsx
"use client";

import { useRef } from "react";
import { cursorRoot, useCursor } from "@/hooks/use-cursor";

/** Lets a control go: it springs back from wherever the magnet held it. */
function release(node: HTMLElement | null) {
  const from = node?.style.translate;
  if (!node || !from) return;
  node.style.translate = "";
  node.animate({ translate: [from, "0px 0px"] }, { duration: 450, easing: "cubic-bezier(0.23, 1, 0.32, 1)" });
}

/** A dot with a pull: over anything clickable, the control leans toward the pointer and the dot settles between them. */
export function MagnetCursor({ className = "" }: { className?: string }) {
  const s = useRef({ x: 0, y: 0, size: 1, el: null as HTMLElement | null, ox: 0, oy: 0 });
  const ref = useCursor((p, el) => {
    const st = s.current;
    const hit = p.hover as HTMLElement | null;
    if (hit !== st.el) {
      release(st.el);
      st.el = hit;
      [st.ox, st.oy] = [0, 0];
      // Leaving the area stops the frames, so the control also lets go on its own.
      hit?.addEventListener("pointerleave", () => release(hit), { once: true });
    }
    let [tx, ty] = [p.x, p.y];
    if (hit) {
      const r = hit.getBoundingClientRect();
      // The control's resting centre: its box minus the lean already applied.
      const cx = r.left + r.width / 2 - st.ox;
      const cy = r.top + r.height / 2 - st.oy;
      if (!p.reduced) {
        st.ox += ((p.x - cx) * 0.3 - st.ox) * p.ease(12);
        st.oy += ((p.y - cy) * 0.3 - st.oy) * p.ease(12);
        hit.style.translate = `${st.ox}px ${st.oy}px`;
      }
      [tx, ty] = [(p.x + cx + st.ox) / 2, (p.y + cy + st.oy) / 2];
    }
    st.x += (tx - st.x) * p.ease(18);
    st.y += (ty - st.y) * p.ease(18);
    st.size += ((p.down ? 0.7 : hit ? 2.2 : 1) - st.size) * p.ease(14);
    (el.firstElementChild as HTMLElement).style.transform = `translate(${st.x}px, ${st.y}px) scale(${st.size})`;
  });

  return (
    <div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
      <div className="absolute size-3 -translate-1/2 rounded-full bg-current" />
    </div>
  );
}

It runs on the useCursor hook, which has its own source and API.

More followers cursors

All followers cursors Or build your own in the Mixer

Made a cursor of your own? Contributed cursors carry their maker's name on their page.

Contribute a cursor