CursorPhysics

Rope Cursor

A glowing verlet-physics rope chain that follows the cursor with soft gravity.

Effect guide

Copy the rope cursor effect

What it is: A glowing verlet-physics rope chain that follows the cursor with soft gravity.

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.

Explore Cursor Effects

"use client";

import { useEffect, useRef } from "react";

export default function RopeCursor() {
  const canvasRef = useRef(null);

useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const chain = [];
const pointer = { x: null, y: null };
const config = {
  nodes: 18,
  segmentLength: 14,
  color: 200,
  gravity: 0.25
};
let frame = 0;
let hue = config.color;
let width = 0;
let height = 0;

function resize() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = rect.width;
  height = rect.height;
  canvas.width = Math.floor(width * dpr);
  canvas.height = Math.floor(height * dpr);
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  if (chain.length !== config.nodes) resetChain();
}

function draw() {
  ctx.fillStyle = "rgba(10, 10, 18, 0.22)";
  ctx.fillRect(0, 0, width, height);
  hue = (hue + 0.4) % 360;

const head = chain[0];
  if (head && pointer.x !== null && pointer.y !== null) {
    head.x = pointer.x;
    head.y = pointer.y;
    head.px = head.x;
    head.py = head.y;
  }

for (let index = 1; index < chain.length; index++) {
    const node = chain[index];
    const vx = node.x - node.px;
    const vy = node.y - node.py;
    node.px = node.x;
    node.py = node.y;
    node.x += vx * 0.98;
    node.y += vy * 0.98 + config.gravity;
  }

for (let iteration = 0; iteration < 8; iteration++) {
    for (let index = 0; index < chain.length - 1; index++) {
      const first = chain[index];
      const second = chain[index + 1];
      const dx = second.x - first.x;
      const dy = second.y - first.y;
      const distance = Math.hypot(dx, dy) || 1;
      const diff = (distance - config.segmentLength) / distance / 2;
      if (index > 0) {
        first.x += dx * diff;
        first.y += dy * diff;
      }
      second.x -= dx * diff;
      second.y -= dy * diff;
    }
  }

for (let index = 1; index < chain.length; index++) {
    const t = index / chain.length;
    const first = chain[index - 1];
    const second = chain[index];
    [
      { width: 8, alpha: 0.04 },
      { width: 4, alpha: 0.12 },
      { width: 1.5, alpha: 0.7 }
    ].forEach((line) => {
      ctx.beginPath();
      ctx.moveTo(first.x, first.y);
      ctx.lineTo(second.x, second.y);
      ctx.strokeStyle = `hsla(${(hue + t * 40) % 360}, 90%, 65%, ${line.alpha})`;
      ctx.lineWidth = line.width;
      ctx.lineCap = "round";
      ctx.stroke();
    });
  }

frame = requestAnimationFrame(draw);
}

function onMove(event) {
  const rect = canvas.getBoundingClientRect();
  pointer.x = event.clientX - rect.left;
  pointer.y = event.clientY - rect.top;
}

function onLeave() {
  pointer.x = null;
  pointer.y = null;
}

if (!canvas || !ctx) return;

resize();
    resetChain();
    const observer = new ResizeObserver(resize);
    observer.observe(canvas);
    canvas.addEventListener("pointermove", onMove);
    canvas.addEventListener("pointerleave", onLeave);
    frame = requestAnimationFrame(draw);

return () => {
      cancelAnimationFrame(frame);
      observer.disconnect();
      canvas.removeEventListener("pointermove", onMove);
      canvas.removeEventListener("pointerleave", onLeave);
    };
  }, []);

return <canvas ref={canvasRef} style={{ display: "block", width: "100%", height: "100%" }} />;
}