@stichiboi/react-elegant-mouse-trail NPM

react-elegant-mouse-trail

A plug and play react element that follows your cursor.

Every frame, it records the position of the mouse. Then it draws an arc between all the points, creating a cool trail.

Install with

npm i @stichiboi/react-elegant-mouse-trail

Then use it in your components

import { MouseTrail } from "@stichiboi/react-elegant-mouse-trail";

export function Layout({ children }: { children: ReactNode }): JSX.Element {
    return (
        <>
            <MouseTrail strokeColor={"#FF8541"}/>
            <main>{children}</main>
        </>
    );
}

Demo

See it in action

Or you can clone the repo and run

npm storybook

Options

Prop name	Type	Description
`lineDuration`	`number`	How long it takes for the trail to fade away
`lineWidthStart`	`number`	The size of the points when they are created
`strokeColor`	`string`	Color of the trail. It should be in a format accepted by strokeStyle. E.g. `"rgb(255, 0, 0)"`)
`lag`	`number`	How long it takes for the trail head to reach the cursor. Should be in the range `[0, 1)`