react-webgl-trails
Version:
A lightweight WebGL-based React component for creating a mouse trail effect.
71 lines (44 loc) • 3.02 kB
Markdown
# React WebGL Trails <img src="https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true" style="height: 40px"/>
[](https://github.com/react18-tools/react-mouse-trail/actions/workflows/test.yml) [](https://codeclimate.com/github/react18-tools/react-mouse-trail/maintainability) [](https://codecov.io/gh/react18-tools/react-mouse-trail) [](https://www.npmjs.com/package/react-mouse-trails) [](https://www.npmjs.com/package/react-mouse-trails)  [](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
> <img src="https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true" style="height: 20px"/> 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 (
<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.
> <img src="https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true" style="height: 20px"/> Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.
<hr />
<p align="center" style="text-align:center">with 💖 by <a href="https://mayank-chaudhari.vercel.app" target="_blank">Mayank Kumar Chaudhari</a></p>