Skip to content

A lightweight WebGL-based React component for creating an interactive mouse trail effect. Works with Next.js out of the box.

License

Notifications You must be signed in to change notification settings

react18-tools/react-webgl-trails

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

React WebGL Trails

test Maintainability codecov Version Downloads npm bundle size Gitpod ready-to-code

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.

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