@stichiboi/react-elegant-mouse-trail

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)