hover-ui
Install

Offset

Cyan, magenta and yellow rings that slip out of register as you move. Over a control they grow and misregister.

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

Adds components/cursors/offset.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
Colorful
Hook
useCursor
Dependencies
None
License
MIT

How it behaves

Three process-color rings that drift out of register as you move and line back up when you stop; over a control they grow and slip apart.

Usage

Any element
import { OffsetCursor } from "@/components/cursors/offset";

export function Section() {
  return (
    <section>
      <OffsetCursor />
      {/* this section now wears Offset */}
    </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
Extra classes for the cursor's root. It draws in its own colors, set in the file; any outline or pointer dot it has follows currentColor, e.g. text-pink-500. Leave mix-blend-difference off: it would turn those colors to negatives.
Hover targets
a, button, input, select, textarea, label, [role=button], [data-cursor-label]

Source

offset.tsx
"use client";

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

const INKS = ["#00a3e0", "#e5007e", "#ffd400"]; // cyan, magenta, yellow

/** Three process-color rings that drift out of register as you move and line back up when you stop; over a control they grow and slip apart. */
export function OffsetCursor({ className = "" }: { className?: string }) {
  const s = useRef({ x: 0, y: 0, vx: 0, vy: 0, size: 1, slip: 0 });
  const ref = useCursor((p, el) => {
    const st = s.current;
    const k = p.ease(14);
    const dx = (p.x - st.x) * k;
    const dy = (p.y - st.y) * k;
    st.x += dx;
    st.y += dy;
    // The smoothed step is how far the inks drift out of register; zero on entry and under reduced motion.
    st.vx = !p.dt || p.reduced ? 0 : st.vx + (dx - st.vx) * p.ease(8);
    st.vy = !p.dt || p.reduced ? 0 : st.vy + (dy - st.vy) * p.ease(8);
    const len = Math.hypot(st.vx, st.vy) || 1;
    const spread = Math.min(len * 1.6, 12);
    st.size += ((p.down ? 0.8 : p.hover ? 1.5 : 1) - st.size) * p.ease(14);
    st.slip += ((p.hover && !p.down ? 4 : 0) - st.slip) * p.ease(10);
    const rings = el.children as HTMLCollectionOf<HTMLElement>;
    for (let i = 0; i < INKS.length; i++) {
      const o = i - 1;
      const x = st.x - (st.vx / len) * spread * o + st.slip * o;
      const y = st.y - (st.vy / len) * spread * o - st.slip * o * 0.75;
      rings[i].style.transform = `translate(${x}px, ${y}px) scale(${st.size})`;
    }
    rings[INKS.length].style.transform = `translate(${p.x}px, ${p.y}px)`;
  });

  return (
    <div ref={ref} aria-hidden className={`${cursorRoot} ${className}`}>
      {INKS.map((c) => (
        <div key={c} className="absolute size-7 -translate-1/2 rounded-full border-2" style={{ borderColor: c }} />
      ))}
      <div className="absolute size-1.5 -translate-1/2 rounded-full bg-current" />
    </div>
  );
}

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

More colorful cursors

All colorful 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