{"id":26481479,"url":"https://github.com/tim-soft/react-particles-webgl","last_synced_at":"2025-04-04T12:09:26.874Z","repository":{"id":34325377,"uuid":"177210517","full_name":"tim-soft/react-particles-webgl","owner":"tim-soft","description":"🔆 A 2D/3D particle library built on React, Three.js and WebGL","archived":false,"fork":false,"pushed_at":"2023-01-03T18:24:23.000Z","size":2579,"stargazers_count":456,"open_issues_count":45,"forks_count":37,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-04-25T07:42:24.868Z","etag":null,"topics":["2d","3d","canvas","fiber","particles","react","threejs"],"latest_commit_sha":null,"homepage":"https://timellenberger.com/particles","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tim-soft.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-22T21:19:09.000Z","updated_at":"2024-04-18T05:04:16.000Z","dependencies_parsed_at":"2023-01-15T06:30:23.616Z","dependency_job_id":null,"html_url":"https://github.com/tim-soft/react-particles-webgl","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-particles-webgl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-particles-webgl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-particles-webgl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tim-soft%2Freact-particles-webgl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tim-soft","download_url":"https://codeload.github.com/tim-soft/react-particles-webgl/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174454,"owners_count":20896078,"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":["2d","3d","canvas","fiber","particles","react","threejs"],"created_at":"2025-03-20T03:20:47.732Z","updated_at":"2025-04-04T12:09:26.857Z","avatar_url":"https://github.com/tim-soft.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Particles WebGL\n\n\u003e A 2D/3D particle library built with React, Three.js and WebGL\n\n**react-particles-webgl** was inspired by the popular [particles.js](https://github.com/VincentGarreau/particles.js/) library and built with [react-three-fiber](https://github.com/drcmda/react-three-fiber) to offer _smooth_ **60FPS** high-count particle fields in both two and three dimensions.\n\n**Documentation** [https://timellenberger.com/libraries/react-particles-webgl](https://timellenberger.com/libraries/react-particles-webgl)\n\n**Config Generator** [https://timellenberger.com/particles](https://timellenberger.com/particles)\n\n**Code Sandbox Demos**\n\n- 2D Green Particles [https://codesandbox.io/s/4x4lmpqz1w](https://codesandbox.io/s/4x4lmpqz1w)\n- 3D Snowfall [https://codesandbox.io/s/308zj3k7l1](https://codesandbox.io/s/308zj3k7l1)\n\n[![npm](https://img.shields.io/npm/v/react-particles-webgl.svg?color=brightgreen\u0026style=popout-square)](https://www.npmjs.com/package/react-particles-webgl)\n[![NPM](https://img.shields.io/npm/l/react-particles-webgl.svg?color=brightgreen\u0026style=popout-square)](https://github.com/tim-soft/react-particles-webgl/blob/master/LICENSE)\n![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=popout-square)\n[![Travis (.org)](https://img.shields.io/travis/tim-soft/react-particles-webgl?style=flat-square)](https://travis-ci.org/tim-soft/react-particles-webgl)\n\n[![2D \"Particles.js\" Canvas](https://i.imgur.com/kpIUdV9.jpg)](https://timellenberger.com/particles)\n[![3D Particle Field](https://i.imgur.com/M34XUy6.jpg)](https://timellenberger.com/particles)\n\n## ✨ Features\n\n- Simple drop-in usage, plays nice with SSR (the demo is running Next.js)\n- Smooth 60FPS particles and lines via WebGL\n- Full Three.js OrbitControls for extreme (optional) scene interactivity\n- Highly customizable particles and lines\n\n## Install\n\n```bash\nyarn add react-particles-webgl three\n```\n\n## Usage\n\n```jsx\nimport React from 'react';\nimport ParticleField from 'react-particles-webgl';\n\n/**\n * The default configuation for the ParticleField component\n *\n * Any option passed in via props will overwrite the default config\n */\nconst config = {\n  // Display reference cube, useful for orienting the field\n  showCube: true,\n  // '2D' or '3D' particle field\n  dimension: '3D',\n  // 'bounce' or 'passthru'\n  // 'bounce' will make particles behave like balls thrown at a wall when hitting canvas boundaries\n  // 'passthru' particles will disappear after hitting canvas boundaries and be added back into the scene elsewhere\n  boundaryType: 'bounce',\n  // Maximum velocity of particles\n  velocity: 2,\n  // Toggles antialiasing -- must be set during construction, cannot be changed after initial render\n  // Slight performance optimization to set false, although lines will appear more jagged\n  antialias: false,\n  // Min/Max multipliers which constraint how particles move in each direction\n  // The default values here allow for particles to move in completely random x, y, z directions\n  // See the \"Snowfall\" preset for an example of how to use these values\n  direction: {\n    xMin: -1,\n    xMax: 1,\n    yMin: -1,\n    yMax: 1,\n    zMin: -1,\n    zMax: 1\n  },\n  lines: {\n    // 'rainbow' or 'solid' color of lines\n    colorMode: 'rainbow',\n    // Color of lines if colorMode: 'solid', must be hex color\n    color: '#351CCB',\n    // Transparency of lines\n    transparency: 0.9,\n    // true/false limit the maximum number of line connections per particle\n    limitConnections: true,\n    maxConnections: 20,\n    // Minimum distance needed to draw line between to particles\n    minDistance: 150,\n    // true/false render lines\n    visible: true\n  },\n  particles: {\n    // 'rainbow' or 'solid' color of particles\n    colorMode: 'rainbow',\n    // Color of lines if colorMode: 'solid', must be hex color\n    color: '#3FB568',\n    // Transparency of particles\n    transparency: 0.9,\n    // 'square' or 'circle' shape of particles\n    shape: 'square',\n    // The exact number of particles to render\n    count: 500,\n    // The minimum particle size\n    minSize: 10,\n    // The maximum particle size\n    maxSize: 75,\n    // true/false render particles\n    visible: true\n  },\n  /*\n   * The camera rig is comprised of Three.js OrbitControls\n   * Pass any valid OrbitControls properties, consult docs for more info\n   *\n   * https://threejs.org/docs/#examples/controls/OrbitControls\n   */\n  cameraControls: {\n    // Enable or disable all camera interaction (click, drag, touch etc)\n    enabled: true,\n    // Enable or disable smooth dampening of camera movement\n    enableDamping: true,\n    dampingFactor: 0.2,\n    // Enable or disable zooming in/out of camera\n    enableZoom: true,\n    // Enable or disable constant rotation of camera around scene\n    autoRotate: true,\n    // Rotation speed -- higher is faster\n    autoRotateSpeed: 0.3,\n    // If true, camera position will be reset whenever any option changes (including this one)\n    // Useful when turning off autoRotate, the camera will return to FOV where scene fits to canvas\n    resetCameraFlag: false\n  }\n};\n\nexport default () =\u003e \u003cParticleField config={config} /\u003e;\n```\n\n## Local Development\n\nClone the repo\n\n```bash\ngit clone https://github.com/tim-soft/react-particles-webgl.git react-particles-webgl\ncd react-particles-webgl\n```\n\nSetup symlinks\n\n```bash\nyarn link\ncd example\nyarn link react-particles-webgl\n```\n\nRun the library in development mode\n\n```bash\nyarn start\n```\n\nRun the example app in development mode\n\n```bash\ncd example\nyarn start\n```\n\nChanges to the library code should hot reload in the demo app\n\n## License\n\nMIT © [Tim Ellenberger](https://github.com/tim-soft)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-soft%2Freact-particles-webgl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftim-soft%2Freact-particles-webgl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftim-soft%2Freact-particles-webgl/lists"}