https://github.com/react18-tools/react-webgl-trails

A lightweight WebGL-based React component for creating an interactive mouse trail effect. Works with Next.js out of the box.
https://github.com/react18-tools/react-webgl-trails

javascript mayank1513 mouse-tracking mouse-trail nextjs nextjs14 nodejs reactjs typescript webgl

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/react18-tools/react-webgl-trails
• Owner: react18-tools
• License: mpl-2.0
• Created: 2024-06-25T08:06:56.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-03-15T08:19:15.000Z (3 months ago)
• Last Synced: 2025-03-22T15:22:56.937Z (3 months ago)
• Topics: javascript, mayank1513, mouse-tracking, mouse-trail, nextjs, nextjs14, nodejs, reactjs, typescript, webgl
• Language: JavaScript
• Homepage:
• Size: 2.79 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: contributing.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

README

        
# React WebGL Trails 

[![test](https://github.com/react18-tools/react-mouse-trail/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/react-mouse-trail/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/4bb3a3316ff4ecd2a9eb/maintainability)](https://codeclimate.com/github/react18-tools/react-mouse-trail/maintainability) [![codecov](https://codecov.io/gh/react18-tools/react-mouse-trail/graph/badge.svg)](https://codecov.io/gh/react18-tools/react-mouse-trail) [![Version](https://img.shields.io/npm/v/react-mouse-trails.svg?colorB=green)](https://www.npmjs.com/package/react-mouse-trails) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/react-mouse-trails.svg)](https://www.npmjs.com/package/react-mouse-trails) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-mouse-trails) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)

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](https://react18-tools.github.io/react-mouse-trail) ([Docs](https://react18-tools.github.io/react-mouse-trail))

✅ Examples for Next.js, Vite

>  Please consider starring [this repository](https://github.com/react18-tools/react-mouse-trail) and sharing it with your friends.

## Getting Started

### Installation

```bash

$ pnpm add react-webgl-trails

```

**_or_**

```bash

$ npm install react-webgl-trails

```

**_or_**

```bash

$ yarn add react-webgl-trails

```

## Usage

MouseTrail is simple to integrate:

```tsx

import { MouseTrail } from "react-mouse-trail";

export default function Layout() {

  return (

    

      

        {/* ... */}

        

      

    

  );

}

```

By default, the RGB value `[1, 0, 0]` represents the color red.

![Repobeats](https://repobeats.axiom.co/api/embed/016960ad97aa7b1abbdd9a615f5ffeb08d869cb6.svg "Repobeats analytics image")

## License

This library is licensed under the MPL-2.0 open-source license.

>  Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.



with 💖 by Mayank Kumar Chaudhari