React Mouse Trail

React WebGL Trails

npm bundle size

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

$ npm install react-webgl-trails

$ 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.

Repobeats

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