{"id":18406367,"url":"https://github.com/react18-tools/react-webgl-trails","last_synced_at":"2025-04-07T08:32:22.539Z","repository":{"id":246140369,"uuid":"819795438","full_name":"react18-tools/react-webgl-trails","owner":"react18-tools","description":"A lightweight WebGL-based React component for creating an interactive mouse trail effect. Works with Next.js out of the box.","archived":false,"fork":false,"pushed_at":"2025-03-15T08:19:15.000Z","size":2924,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T15:22:56.937Z","etag":null,"topics":["javascript","mayank1513","mouse-tracking","mouse-trail","nextjs","nextjs14","nodejs","reactjs","typescript","webgl"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react18-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"contributing.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["react18-tools","mayank1513"],"polar":"mayank1513","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":["https://pages.razorpay.com/mayank1513"]}},"created_at":"2024-06-25T08:06:56.000Z","updated_at":"2025-03-15T08:19:18.000Z","dependencies_parsed_at":"2024-06-26T04:38:20.924Z","dependency_job_id":"f3a3c2ce-befa-42f7-9b9d-6b6aad0157ea","html_url":"https://github.com/react18-tools/react-webgl-trails","commit_stats":null,"previous_names":["react18-tools/react-mouse-trail"],"tags_count":7,"template":false,"template_full_name":"react18-tools/turborepo-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact-webgl-trails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact-webgl-trails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact-webgl-trails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Freact-webgl-trails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react18-tools","download_url":"https://codeload.github.com/react18-tools/react-webgl-trails/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247620397,"owners_count":20968202,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","mayank1513","mouse-tracking","mouse-trail","nextjs","nextjs14","nodejs","reactjs","typescript","webgl"],"created_at":"2024-11-06T03:08:41.352Z","updated_at":"2025-04-07T08:32:21.585Z","avatar_url":"https://github.com/react18-tools.png","language":"JavaScript","funding_links":["https://github.com/sponsors/react18-tools","https://github.com/sponsors/mayank1513","https://polar.sh/mayank1513","https://pages.razorpay.com/mayank1513"],"categories":[],"sub_categories":[],"readme":"# React WebGL Trails \u003cimg src=\"https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true\" style=\"height: 40px\"/\u003e\n\n[![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/)\n\nA lightweight WebGL-based React component for creating an interactive mouse trail effect. Works with Next.js out of the box.\n\n✅ Fully TypeScript\n\n✅ Leverages the power of React 18 Server components\n\n✅ Compatible with all React build systems/tools/frameworks\n\n✅ Documented with [Typedoc](https://react18-tools.github.io/react-mouse-trail) ([Docs](https://react18-tools.github.io/react-mouse-trail))\n\n✅ Examples for Next.js, Vite\n\n\u003e \u003cimg src=\"https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true\" style=\"height: 20px\"/\u003e Please consider starring [this repository](https://github.com/react18-tools/react-mouse-trail) and sharing it with your friends.\n\n## Getting Started\n\n### Installation\n\n```bash\n$ pnpm add react-webgl-trails\n```\n\n**_or_**\n\n```bash\n$ npm install react-webgl-trails\n```\n\n**_or_**\n\n```bash\n$ yarn add react-webgl-trails\n```\n\n## Usage\n\nMouseTrail is simple to integrate:\n\n```tsx\nimport { MouseTrail } from \"react-mouse-trail\";\n\nexport default function Layout() {\n  return (\n    \u003chtml lang=\"en\" suppressHydrationWarning\u003e\n      \u003cbody className={inter.className}\u003e\n        {/* ... */}\n        \u003cMouseTrail rgb={[1, 0, 0]} /\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n  );\n}\n```\n\nBy default, the RGB value `[1, 0, 0]` represents the color red.\n\n![Repobeats](https://repobeats.axiom.co/api/embed/016960ad97aa7b1abbdd9a615f5ffeb08d869cb6.svg \"Repobeats analytics image\")\n\n## License\n\nThis library is licensed under the MPL-2.0 open-source license.\n\n\u003e \u003cimg src=\"https://github.com/react18-tools/react-mouse-trail/blob/main/popper.png?raw=true\" style=\"height: 20px\"/\u003e Please consider enrolling in [our courses](https://mayank-chaudhari.vercel.app/courses) or [sponsoring](https://github.com/sponsors/mayank1513) our work.\n\n\u003chr /\u003e\n\n\u003cp align=\"center\" style=\"text-align:center\"\u003ewith 💖 by \u003ca href=\"https://mayank-chaudhari.vercel.app\" target=\"_blank\"\u003eMayank Kumar Chaudhari\u003c/a\u003e\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Freact-webgl-trails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact18-tools%2Freact-webgl-trails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Freact-webgl-trails/lists"}