Fluid Cursor Trail

Component 32

About

Canvas particle trail that follows the cursor as a fixed overlay, with customizable color, particle count, and physics.

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

Code

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

Usage.tsx

import { FluidCursorTrail } from "@/components/ui/fluid-cursor-trail";

export default function FluidCursorTrailDemo() {
  return (
    <div className="relative flex h-[420px] w-full items-center justify-center overflow-hidden rounded-xl border bg-neutral-950 text-neutral-100">
      <FluidCursorTrail bound color="#8b5cf6" particleCount={4} />
      <div className="pointer-events-none z-10 flex flex-col items-center gap-2 text-center">
        <h2 className="text-2xl font-semibold tracking-tight">Move your cursor</h2>
        <p className="text-sm text-neutral-400">A fluid particle trail follows the pointer.</p>
      </div>
    </div>
  );
}