Cursor Trail

Pro

Full-page canvas cursor trail that leaves a fading particle stream. Fixed overlay, zero layout impact. Configurable color, size, trail length, and fade duration.

Pro component — requires an active license. Get access →

Cursor Trail

A fixed canvas overlay that follows your cursor with a fading particle stream. Move your mouse anywhere on the page to see it.

<CursorTrail color="oklch(78% 0.17 200)" />

Installation

Add your token to .env

Get a token from your dashboard, then add it to .env:

bash

PARTICLEUI_TOKEN=your-token-here

Add the registry to components.json

Wire up the authenticated registry so the CLI can resolve Pro components:

bash

"registries": {
  "@particleui": {
    "url": "https://particleui.dev/r/react/{name}.json",
    "headers": { "Authorization": "Bearer ${PARTICLEUI_TOKEN}" }
  }
}

Run the CLI

bash

npx particleui-cli add cursor-trail

Usage

TSX

"use client"
import { CursorTrail } from "@/components/ui/cursor-trail"

// Mount once at root layout or a top-level client component.
// The canvas is position:fixed z-[9999] so it overlays everything.
export default function Layout({ children }) {
  return (
    <>
      <CursorTrail color="oklch(78% 0.17 200)" size={6} length={24} />
      {children}
    </>
  )
}

Props

Prop	Type	Default	Required
color	string	`"oklch(78% 0.17 200)"`	no
size	number	`6`	no
length	number	`24`	no
fade	number	`400`	no
className	string	—	no

Details

Source filecomponents/ui/cursor-trail.tsx

Typeui

Categoriesanimations

npm dependencies

Registry deps

Claude skill—