{"id":13402791,"url":"https://github.com/lindelof/particles-bg","last_synced_at":"2025-03-14T08:31:08.316Z","repository":{"id":37271254,"uuid":"223338365","full_name":"lindelof/particles-bg","owner":"lindelof","description":"React particles animation background component","archived":false,"fork":false,"pushed_at":"2021-04-02T03:48:13.000Z","size":1013,"stargazers_count":647,"open_issues_count":6,"forks_count":96,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-10-23T03:17:16.517Z","etag":null,"topics":["backgrounds","login-template","react-background","react-background-component","react-bg","react-component","react-particle","react-particles","react-resume","react-theme","resume-template"],"latest_commit_sha":null,"homepage":"https://stackblitz.com/edit/react-a6pm3w","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lindelof.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-22T06:27:42.000Z","updated_at":"2024-10-19T09:16:06.000Z","dependencies_parsed_at":"2022-08-02T12:07:05.071Z","dependency_job_id":null,"html_url":"https://github.com/lindelof/particles-bg","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lindelof","download_url":"https://codeload.github.com/lindelof/particles-bg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243515567,"owners_count":20303258,"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":["backgrounds","login-template","react-background","react-background-component","react-bg","react-component","react-particle","react-particles","react-resume","react-theme","resume-template"],"created_at":"2024-07-30T19:01:20.901Z","updated_at":"2025-03-14T08:31:07.880Z","avatar_url":"https://github.com/lindelof.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI Animation","Project","Animations","🚀 A series of exquisite and compact web page cool effects","Animations [🔝](#readme)","React UI","动画"],"sub_categories":["Form Components","GraphQL","Other","Background Decoration","其它"],"readme":"# particles-bg\n\n[![NPM](https://img.shields.io/npm/v/particles-bg.svg)](https://www.npmjs.com/package/particles-bg) [![npm](https://img.shields.io/npm/dm/particles-bg)](https://www.npmjs.com/package/particles-bg) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e React component for particles backgrounds\n\nThis project refers to the source code of the [__Proton__](https://github.com/drawcall/Proton) official website, I packaged it into a component. You can use it casually in your own projects. Thanks to the great author.\n\n#### A `vue.js` version of `particles-bg-vue` is here [https://github.com/lindelof/particles-bg-vue](https://github.com/lindelof/particles-bg-vue)\n\n### Online demo\n* demo1 [https://stackblitz.com/edit/react-a6pm3w](https://stackblitz.com/edit/react-a6pm3w?file=index.js)\n* demo2 [https://stackblitz.com/edit/react-bpv9fc](https://stackblitz.com/edit/react-bpv9fc?file=index.js)\n* custom1 [https://stackblitz.com/edit/react-sop6sx](https://stackblitz.com/edit/react-sop6sx?file=index.js)\n* custom2 [https://stackblitz.com/edit/react-v1ou5e](https://stackblitz.com/edit/react-v1ou5e?file=index.js)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/01.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/02.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/03.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/04.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/05.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/06.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/07.jpg?raw=true)\n\n## Install\n\n```bash\nnpm install --save particles-bg\n```\n\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport ParticlesBg from 'particles-bg'\n\nclass Example extends Component {\n  render () {\n    return (\n      \u003c\u003e\n        \u003cdiv\u003e...\u003c/div\u003e\n        \u003cParticlesBg type=\"circle\" bg={true} /\u003e\n      \u003c/\u003e\n    )\n  }\n}\n```\n\n## Parameter Description\n```jsx\n\u003cParticlesBg color=\"#ff0000\" num={200} type=\"circle\" bg={true} /\u003e\n```\n#### * type - Is the type of particle animation\nIs the type of particle animation, `random` is a random selection. You are also free to customize use `custom`.\n\n```js\n\"color\"\n\"ball\"\n\"lines\"\n\"thick\"\n\"circle\"\n\"cobweb\"\n\"polygon\"\n\"square\"\n\"tadpole\"\n\"fountain\"\n\"random\"\n\"custom\"\n```\n\n#### * num - The number of particles emitted each time, generally not set\n\n#### * color - The background color or particle color of the particle scene\nNotice: which should be an array under type=`color`\n\n#### * bg - Set to html background\n\n#### If set the bg value to `true`\n```html\nbg={true} /\u003e\n```\n\n```css\nposition: \"absolute\",\nzIndex: -1,\ntop: 0,\nleft: 0\n```\n##### If set the bg value to `object`\n\n```html\nbg={{\n  position: \"absolute\",\n  zIndex: 999,\n  width: 200\n}} /\u003e\n```\n\nOf course, you can also set class `particles-bg-canvas-self` to modify the style.\n\n```css\n.particles-bg-canvas-self{\n  background: #000;\n  ...\n}\n```\n\n## About Custom\n\n![](https://github.com/lindelof/particles-bg/blob/master/image/08.jpg?raw=true)\n\nYou can use type=\"custom\" to achieve a higher degree of freedom for the particle background.\n\n```jsx\n  let config = {\n      num: [4, 7],\n      rps: 0.1,\n      radius: [5, 40],\n      life: [1.5, 3],\n      v: [2, 3],\n      tha: [-40, 40],\n      // body: \"./img/icon.png\", // Whether to render pictures\n      // rotate: [0, 20],\n      alpha: [0.6, 0],\n      scale: [1, 0.1],\n      position: \"center\", // all or center or {x:1,y:1,width:100,height:100}\n      color: [\"random\", \"#ff0000\"],\n      cross: \"dead\", // cross or bround\n      random: 15,  // or null,\n      g: 5,    // gravity\n      // f: [2, -1], // force\n      onParticleUpdate: (ctx, particle) =\u003e {\n          ctx.beginPath();\n          ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);\n          ctx.fillStyle = particle.color;\n          ctx.fill();\n          ctx.closePath();\n      }\n    };\n\n    return (\n      \u003cdiv\u003e\n        \u003cSignIn /\u003e\n        \u003cParticlesBg type=\"custom\" config={config} bg={true} /\u003e\n      \u003c/div\u003e\n    )\n```\n\n## Similar projects\nMaybe you will like these two projects, they will also make your page flourish\n* [https://github.com/lindelof/react-mouse-particles](https://github.com/lindelof/react-mouse-particles)\n* [https://github.com/lindelof/power-mode-input](https://github.com/lindelof/power-mode-input)\n\n## License\n\nhttps://opensource.org/licenses/MIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flindelof%2Fparticles-bg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flindelof%2Fparticles-bg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flindelof%2Fparticles-bg/lists"}