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-trailThen 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>
</>
);
}Or you can clone the repo and run
npm storybook
| 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) |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent