Elastic Cursor

A springy cursor ring that trails the pointer while nearby words repel away.

"use client";

import { motion, useSpring } from "framer-motion";
import { useEffect, useRef, useState } from "react";

const words = ["motion","spring","physics","cursor","hover","drag","inertia","elastic","design","engineer"];

export default function ElasticCursor() {
  const wordRefs = useRef([]);
  const [pointer, setPointer] = useState(null);
  const ringX = useSpring(0, { stiffness: 80, damping: 18 });
  const ringY = useSpring(0, { stiffness: 80, damping: 18 });

  useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const move = (event) => {
      const point = { x: event.clientX, y: event.clientY };
      setPointer(point);
      ringX.set(point.x);
      ringY.set(point.y);
    };

    window.addEventListener("pointermove", move);
    return () => window.removeEventListener("pointermove", move);
  }, [ringX, ringY]);

  function getWordTransform(index) {
    const word = wordRefs.current[index];
    if (!pointer || !word) return "translate3d(0, 0, 0)";

    const rect = word.getBoundingClientRect();
    const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
    const dx = center.x - pointer.x;
    const dy = center.y - pointer.y;
    const distance = Math.hypot(dx, dy);

    if (distance > 130 || distance === 0) return "translate3d(0, 0, 0)";

    const force = (1 - distance / 130) * 32;
    return `translate3d(${(dx / distance) * force}px, ${(dy / distance) * force}px, 0)`;
  }

  return (
    <>
      <motion.div
        style={{
          position: "fixed",
          left: ringX,
          top: ringY,
          width: 40,
          height: 40,
          borderRadius: "50%",
          border: `1.5px solid #3b82f6`,
          transform: "translate(-50%, -50%)",
          pointerEvents: "none",
          zIndex: 9999
        }}
      />
      <div style={{ color: "#ffffff", display: "flex", flexWrap: "wrap", justifyContent: "center", gap: 12, font: "700 28px system-ui", maxWidth: 720 }}>
        {words.map((word, index) => (
          <span
            key={word + index}
            ref={(node) => { wordRefs.current[index] = node; }}
            style={{
              display: "inline-block",
              padding: "12px 20px",
              border: "1px solid rgba(255,255,255,0.16)",
              borderRadius: 999,
              background: "rgba(255,255,255,0.07)",
              transform: getWordTransform(index),
              transition: "transform 150ms ease"
            }}
          >
            {word}
          </span>
        ))}
      </div>
    </>
  );
}

Effect guide

Copy the elastic cursor effect

What it is: A springy cursor ring that trails the pointer while nearby words repel away.

Where to use it: Use this motion pattern for launch pages, portfolios, playgrounds, and moments where pointer feedback should feel intentional.

Supported formats: React, Vue, Vanilla JS.

Get motion drops

New UI effects, code snippets, and GrabMotion updates by email.