Cursor trail
Small pixel squares that trail the mouse: each one shrinks toward its center and fades out in pixel steps, snapped to a grid. Fast moves are filled in along the path, so the trail never breaks into gaps. One fixed <canvas> that only animates while squares are alive; off on touch screens and under reduced motion. Purely decorative.
import { CursorTrail } from "pixelbits/cursor-trail";
import { Switch } from "pixelbits/switch";
import { useState } from "react";
export default function Demo() {
const [on, setOn] = useState(false);
return (
<>
<Switch label="Cursor trail on this page" checked={on} onCheckedChange={setOn} />
{on && <CursorTrail />}
</>
);
}Installation
import { CursorTrail } from "pixelbits/cursor-trail";npx shadcn add https://pixelbits.ali-moradi-develop.com/r/cursor-trail.jsonAPI
<CursorTrail>
Small pixel squares that trail the mouse: each one shrinks toward its center and fades out in pixel steps, snapped to a grid. Fast moves are filled in along the path, so the trail never breaks into gaps. One fixed <canvas> that only animates while squares are alive; off on touch screens and under reduced motion. Purely decorative.
// once, e.g. in the layout of a landing page
<CursorTrail />| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 6 | Square size in CSS px; positions snap to this grid. |
| life | number | 420 | How long a square lives, in ms. |
| color | string | "var(--pb-accent)" | Square color; any CSS color. |
| className | string | — | Extra classes for the canvas (e.g. a |