React WebGL Trails
A lightweight WebGL-based React component for creating an interactive mouse trail effect. Works with Next.js out of the box.
✅ Fully TypeScript
✅ Leverages the power of React 18 Server components
✅ Compatible with all React build systems/tools/frameworks
✅ Documented with Typedoc (Docs)
✅ Examples for Next.js, Vite
Please consider starring this repository and sharing it with your friends.
Getting Started
Installation
$ pnpm add react-webgl-trails
or
$ npm install react-webgl-trails
or
$ yarn add react-webgl-trails
Usage
MouseTrail is simple to integrate:
import { MouseTrail } from "react-mouse-trail";
export default function Layout() {
return (
<html lang="en" suppressHydrationWarning>
<body className={inter.className}>
{/* ... */}
<MouseTrail rgb={[1, 0, 0]} />
</body>
</html>
);
}
By default, the RGB value [1, 0, 0]
represents the color red.
License
This library is licensed under the MPL-2.0 open-source license.
Please consider enrolling in our courses or sponsoring our work.
with 💖 by Mayank Kumar Chaudhari