Jelly

A soft blob that stretches along your motion and wobbles back. Swells over controls, squashes on press.

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

Adds components/cursors/jelly.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.Open this on a computer to move it around: it follows a mouse, not a finger.

All cursors

Kind: Weird
Hook: useCursor
Dependencies: None
License: MIT

How it behaves

A soft blob that stretches along your motion, wobbles back to round, swells over anything clickable and squashes on press.

Usage

Any element

import { JellyCursor } from "@/components/cursors/jelly";

export function Section() {
  return (
    <section>
      <JellyCursor />
      {/* this section now wears Jelly */}
    </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

jelly.tsx

"use client";

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

/** A soft blob that stretches along your motion, wobbles back to round, swells over anything clickable and squashes on press. */
export function JellyCursor({ className = "" }: { className?: string }) {
  const s = useRef({ x: 0, y: 0, angle: 0, stretch: 1, v: 0, press: 1 });
  const ref = useCursor((p, el) => {
    const st = s.current;
    const k = p.ease(20);
    const [dx, dy] = [(p.x - st.x) * k, (p.y - st.y) * k];
    st.x += dx;
    st.y += dy;
    const speed = p.dt ? Math.hypot(dx, dy) / p.dt : 0;
    if (speed > 20) st.angle = Math.atan2(dy, dx);
    const target = p.reduced ? 1 : 1 + Math.min(speed / 1400, 0.7);
    if (p.dt && !p.reduced) {
      // An underdamped spring, so it overshoots a little on the way back to round.
      st.v += ((target - st.stretch) * 220 - st.v * 10) * p.dt;
      st.stretch += st.v * p.dt;
    } else st.stretch = target;
    st.press += ((p.down ? 0.8 : p.hover ? 1.7 : 1) - st.press) * p.ease(18);
    const blob = el.firstElementChild as HTMLElement;
    blob.style.transform = `translate(${st.x}px, ${st.y}px) rotate(${st.angle}rad) scale(${st.stretch * st.press}, ${st.press / st.stretch})`;
  });

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

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

More weird cursors

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