Cursor Trail

Component 5

About

A custom animated cursor that leaves a shrinking trail of particle dots following the pointer.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Cursor Trail to your project and fits it to your theme.

Code

How Cursor Trail is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CursorTrail from "@/components/ui/cursor-trail";

export default function CursorTrailDemo() {
  return (
    <div className="relative w-full h-screen bg-background overflow-hidden flex items-center justify-center">
      <CursorTrail color="bg-blue-500" size={10} count={6} />
      <p className="text-muted-foreground text-sm">
        Move your mouse around to see the trail
      </p>
    </div>
  );
}