Trail

Custom cursor with trailing effect and line following cursor

$ npx @hritik-sharmaa/repeat-ui add cursor-trail
Category
Cursor
Added
Sep 12, 2025
Version
2.0.0
Packages
None
Flavors
TS · JS · Tailwind · CSS
Live preview

Move the cursor

Customize
40
10px
0.15
import CursorTrail from "@/components/repeat-ui/cursor-trail/preview";

<CursorTrail />

Installation

  1. Run the command

    Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.

    $ npx @hritik-sharmaa/repeat-ui add cursor-trail --variant ts-tailwind

  2. Use it

    The files are in components/repeat-ui/cursor-trail/.

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

export default function Page() {
  return <CursorTrail />;
}

Props

PropTypeDefaultDescription
trailLengthnumber40Number of points in the trail.
trailColorstring"#9dff00"Trail colour.
widthnumber10Trail thickness at the head, in pixels.
dotColorstring"currentColor"Dot colour; follows the text colour by default.
smoothnessnumber0.15How quickly the cursor catches up, from 0 (never) to 1 (instantly).
hideCursorbooleanfalseHide the system cursor on the whole page.

More cursor

See all

Simple custom dot cursor with smooth following animation

Dot