CursorTrail

Cursor Trail

A lightweight trailing cursor effect for expressive product moments.

"use client";

import { useEffect, useRef } from "react";

export default function CursorTrail() {
  const canvasRef = useRef(null);
  const targetRef = useRef(null);
  const pointsRef = useRef([]);

  useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext("2d");
    if (!ctx) return;

    const config = {
      color: "#60a5fa",
      size: 18,
      length: 36,
      fade: 0.03,
      speed: 0.35
    };

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

    const draw = () => {
      const { width, height } = canvas.getBoundingClientRect();
      ctx.clearRect(0, 0, width, height);

      const target = targetRef.current;
      const points = pointsRef.current;

      if (target) {
        const previous = points[0] ?? target;
        points.unshift({
          x: previous.x + (target.x - previous.x) * config.speed,
          y: previous.y + (target.y - previous.y) * config.speed,
          age: 0
        });
      }

      for (const point of points) point.age += config.fade;
      points.splice(config.length);

      points.forEach((point, index) => {
        const life = Math.max(0, 1 - index / config.length - point.age);
        if (life <= 0) return;

        ctx.globalAlpha = life;
        ctx.beginPath();
        ctx.fillStyle = config.color;
        ctx.arc(point.x, point.y, config.size * (0.35 + life), 0, Math.PI * 2);
        ctx.fill();
      });

      ctx.globalAlpha = 1;
      frame = requestAnimationFrame(draw);
    };

    const onMove = (event) => {
      const rect = canvas.getBoundingClientRect();
      targetRef.current = { x: event.clientX - rect.left, y: event.clientY - rect.top };
    };

    const onLeave = () => {
      targetRef.current = null;
    };

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

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

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

Effect guide

Copy the cursor trail effect

What it is: A lightweight trailing cursor effect for expressive product moments.

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.