CursorColor

Comet Trail

A color-shifting cursor trail that fades like a small moving comet.

"use client";

import { useEffect, useRef } from "react";

export default function CometTrail() {
  const canvasRef = useRef(null);
  const trail = useRef([]);

  useEffect(() => {
    const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduceMotion) return;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    const dpr = Math.min(window.devicePixelRatio || 1, 2);
    let frame = 0;
    let width = 0;
    let height = 0;

    function resize() {
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = Math.floor(width * dpr);
      canvas.height = Math.floor(height * dpr);
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }

    function onMove(event) {
      trail.current.push({ x: event.clientX, y: event.clientY, age: 0 });
      if (trail.current.length > 48) trail.current.shift();
    }

    function draw() {
      ctx.clearRect(0, 0, width, height);

      trail.current.forEach((point, index) => {
        point.age += 1;
        const life = Math.max(0, 1 - point.age / 48);
        const t = index / Math.max(trail.current.length - 1, 1);
        const radius = 3 * life;

        if (radius <= 0) return;

        ctx.beginPath();
        ctx.arc(point.x, point.y, radius, 0, Math.PI * 2);
        ctx.fillStyle = `hsla(${180 + t * 80}, 90%, 70%, ${life * 0.9})`;
        ctx.fill();
      });

      trail.current = trail.current.filter((point) => point.age < 48);
      frame = requestAnimationFrame(draw);
    }

    resize();
    window.addEventListener("resize", resize);
    window.addEventListener("pointermove", onMove);
    frame = requestAnimationFrame(draw);

    return () => {
      window.removeEventListener("resize", resize);
      window.removeEventListener("pointermove", onMove);
      cancelAnimationFrame(frame);
    };
  }, []);

  return (
    <canvas
      ref={canvasRef}
      style={{ position: "fixed", inset: 0, pointerEvents: "none", zIndex: 9999 }}
    />
  );
}

Effect guide

Copy the comet trail cursor effect

What it is: A color-shifting cursor trail that fades like a small moving comet.

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.