CursorElastic

Neon Thread

A glowing elastic wire stretches from an origin point toward the cursor.

Effect guide

Copy the neon thread cursor effect

What it is: A glowing elastic wire stretches from an origin point toward the cursor.

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 NeonThread() {
  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");
let frame = 0;
let width = 0;
let height = 0;
const state = {
  springX: 0,
  springY: 0,
  velocityX: 0,
  velocityY: 0,
  hue: 200,
  mouseX: null,
  mouseY: null
};

function resize() {
  const rect = canvas.getBoundingClientRect();
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  width = rect.width;
  height = rect.height;
  canvas.width = Math.max(1, Math.floor(width * dpr));
  canvas.height = Math.max(1, Math.floor(height * dpr));
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);

if (state.springX === 0 && state.springY === 0) {
    state.springX = width / 2;
    state.springY = height / 2;
  }
}

function draw() {
  const originX = width / 2;
  const originY = height / 2;
  const targetX = state.mouseX ?? originX;
  const targetY = state.mouseY ?? originY;

ctx.clearRect(0, 0, width, height);
  state.hue = (state.hue + 0.8) % 360;
  state.velocityX = (state.velocityX + (targetX - state.springX) * 0.12) * 0.72;
  state.velocityY = (state.velocityY + (targetY - state.springY) * 0.12) * 0.72;
  state.springX += state.velocityX;
  state.springY += state.velocityY;

const controlX = (originX + state.springX) / 2 - state.velocityY * 2;
  const controlY = (originY + state.springY) / 2 + state.velocityX * 2;

[
    { width: 12, alpha: 0.04 },
    { width: 6, alpha: 0.1 },
    { width: 2.5, alpha: 0.5 },
    { width: 1, alpha: 0.95 }
  ].forEach((layer) => {
    ctx.beginPath();
    ctx.moveTo(originX, originY);
    ctx.quadraticCurveTo(controlX, controlY, state.springX, state.springY);
    ctx.strokeStyle = `hsla(${state.hue}, 100%, 70%, ${layer.alpha})`;
    ctx.lineCap = "round";
    ctx.lineWidth = layer.width;
    ctx.stroke();
  });

ctx.beginPath();
  ctx.arc(originX, originY, 4, 0, Math.PI * 2);
  ctx.fillStyle = `hsla(${state.hue}, 100%, 80%, 0.9)`;
  ctx.fill();

ctx.beginPath();
  ctx.arc(state.springX, state.springY, 3, 0, Math.PI * 2);
  ctx.fillStyle = `hsla(${(state.hue + 60) % 360}, 100%, 80%, 0.9)`;
  ctx.fill();

frame = requestAnimationFrame(draw);
}

function onMove(event) {
  const rect = canvas.getBoundingClientRect();
  state.mouseX = event.clientX - rect.left;
  state.mouseY = event.clientY - rect.top;
}

function onLeave() {
  state.mouseX = null;
  state.mouseY = null;
}

if (!canvas || !ctx) return;

resize();
    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%" }} />;
}