{"id":20548425,"url":"https://github.com/react18-tools/webgl-generative-particles","last_synced_at":"2025-04-14T10:52:58.664Z","repository":{"id":246728872,"uuid":"821868974","full_name":"react18-tools/webgl-generative-particles","owner":"react18-tools","description":"An efficient WebGL-based generative particle system.","archived":false,"fork":false,"pushed_at":"2025-04-11T01:43:58.000Z","size":4243,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-11T02:44:27.359Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://webgl-generative-particles.vercel.app/","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,"zenodo":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-29T17:10:57.000Z","updated_at":"2025-04-11T01:44:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"837fa3a6-5ec7-47e7-9f06-0b2d3242e26e","html_url":"https://github.com/react18-tools/webgl-generative-particles","commit_stats":null,"previous_names":["react18-tools/webgl-generative-particles"],"tags_count":2,"template":false,"template_full_name":"react18-tools/turborepo-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fwebgl-generative-particles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fwebgl-generative-particles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fwebgl-generative-particles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react18-tools%2Fwebgl-generative-particles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react18-tools","download_url":"https://codeload.github.com/react18-tools/webgl-generative-particles/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868806,"owners_count":21174755,"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":[],"created_at":"2024-11-16T02:13:28.319Z","updated_at":"2025-04-14T10:52:58.643Z","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":"# WebGL Generative Particles \u003cimg src=\"https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true\" style=\"height: 40px\"/\u003e\n\n\u003e This library is a Work In Progress. Feel free to request features, report bugs, or contribute. We aim to keep the APIs stable, though some changes may occur.\n\n[![test](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/webgl-generative-particles/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/17e43ef7ca4593a18757/maintainability)](https://codeclimate.com/github/react18-tools/webgl-generative-particles/maintainability) [![codecov](https://codecov.io/gh/react18-tools/webgl-generative-particles/graph/badge.svg)](https://codecov.io/gh/react18-tools/webgl-generative-particles) [![Version](https://img.shields.io/npm/v/webgl-generative-particles.svg?colorB=green)](https://www.npmjs.com/package/webgl-generative-particles) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/d18m/webgl-generative-particles.svg)](https://www.npmjs.com/package/webgl-generative-particles) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/webgl-generative-particles) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)\n\n\"webgl-generative-particles\" is an efficient WebGL-based generative particle system simulator designed for both React and vanilla JS applications. This system follows the mouse pointer, providing interactive and dynamic visual effects. It offers seamless integration with React (including React 18 and beyond) and Next.js, making it an ideal choice for modern frontend development. The simulator is customizable, compatible with various frameworks, and delivers high performance and real-time rendering for progressive web development.\n\n\u003e Check out the live demo at - https://webgl-generative-particles.vercel.app/\n\n## Features\n\n✅ Fully Treeshakable (import from `webgl-generative-particles/react`)\n\n✅ Fully TypeScript Supported\n\n✅ Leverages the power of React 18 Server components\n\n✅ Compatible with all React 18 build systems/tools/frameworks\n\n✅ Documented with [Typedoc](https://react18-tools.github.io/webgl-generative-particles) ([Docs](https://react18-tools.github.io/webgl-generative-particles))\n\n✅ Examples for Next.js, Vite, and Remix\n\n\u003e \u003cimg src=\"https://github.com/react18-tools/webgl-generative-particles/blob/main/popper.png?raw=true\" style=\"height: 20px\"/\u003e Please consider starring [this repository](https://github.com/react18-tools/webgl-generative-particles) and sharing it with your friends.\n\n## Getting Started\n\n### Installation\n\nUsing pnpm:\n\n```bash\n$ pnpm add webgl-generative-particles\n```\n\nUsing npm:\n\n```bash\n$ npm install webgl-generative-particles\n```\n\nUsing yarn:\n\n```bash\n$ yarn add webgl-generative-particles\n```\n\n## Usage\n\n```ts\nimport { Particles } from \"webgl-generative-particles/react\";\n\n\u003cParticles\n  fullScreenOverlay\n  options={{\n    rgba: [0, 1, 0, 0.5],\n  }}\n/\u003e\n```\n\n### Simulator Options\n\n```ts\nexport interface ParticlesOptions {\n  /** Particle Color @defaultValue [1, 0, 0, 1] -\u003e red */\n  rgba?: [number, number, number, number];\n  /** Maximum number of particles @defaultValue 100_000 */\n  maxParticles?: number;\n  /** Particle generation rate @defaultValue 0.5 */\n  generationRate?: number;\n  /** Overlay mode @defaultValue false */\n  overlay?: boolean;\n  /** Disable mouse interaction @defaultValue false */\n  mouseOff?: boolean;\n  /** Min and max angles in radians @defaultValue [-Math.PI, Math.PI] */\n  angleRange?: [number, number];\n  /** Min and max age of particles in seconds */\n  ageRange?: [number, number];\n  /** Speed range [minSpeed, maxSpeed] */\n  speedRange?: [number, number];\n  /** Initial origin, will update as per mouse position if mouseOff is not set @defaultValue [0, 0] */\n  origin?: [number, number];\n  /** Constant force [fx, fy] or a force field texture (Work In Progress) */\n  forceField?: Vector2D; //| Vector[][] | string;\n}\n```\n\n## Credits\n\nThe concepts in this library were learned from the following blogs and tutorials:\n\n- https://experiments.withgoogle.com/search?q=particles\n- https://nullprogram.com/blog/2014/06/29/\n- https://gpfault.net/posts/webgl2-particles.txt.html\n- https://umbcgaim.wordpress.com/2010/07/01/gpu-random-numbers/\n- https://www.youtube.com/playlist?list=PLjcVFFANLS5zH_PeKC6I8p0Pt1hzph_rt\n- https://stackoverflow.com/q/15215968/23175171\n- https://stackoverflow.com/q/71021772/23175171\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/webgl-generative-particles/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%2Fwebgl-generative-particles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact18-tools%2Fwebgl-generative-particles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact18-tools%2Fwebgl-generative-particles/lists"}