Cursor Trail

Animates a cursor trail effect on hover, you can use anything as a trail.

Open in 21st dev
Loading...

Installation

Usage

<div className="overflow-hidden relative border bg-[#59C9A5] text-card-foreground w-[200px] aspect-square grid grid-cols-1 grid-rows-1 *:col-start-1 *:row-start-1 justify-center text-center items-center">
  <CursorTrail
    pixelSize={20}
    fadeDuration={500}
    pixelClassName="bg-black "
    className="size-full"
  />
  <span className="inline text-2xl">◾️</span>
</div>

Props

PropTypeDefault
pixelClassName?
string
-
delay?
number
0
fadeDuration?
number
500
pixelSize?
number
20

Checkbox Field

Checkbox field with label.

Custom Cursor

Turn your cursor into any element you want, text, image, video, or a shape.