{"id":13534124,"url":"https://github.com/lindelof/particles-bg-vue","last_synced_at":"2025-04-01T22:31:16.216Z","repository":{"id":48191527,"uuid":"224649531","full_name":"lindelof/particles-bg-vue","owner":"lindelof","description":"A vue.js particles animation background component","archived":false,"fork":false,"pushed_at":"2021-03-20T03:25:31.000Z","size":613,"stargazers_count":233,"open_issues_count":3,"forks_count":17,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-16T11:21:23.222Z","etag":null,"topics":["particle-bg","particles","particles-bg","vue-background","vue-particle","vue-particle-background","vue-particles","vue-resume","vuejs-particles"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/particles-bg-vue-bg145","language":"Vue","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/lindelof.png","metadata":{"files":{"readme":"README.md","changelog":null,"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-11-28T12:33:14.000Z","updated_at":"2024-12-26T01:27:34.000Z","dependencies_parsed_at":"2022-09-12T15:32:19.591Z","dependency_job_id":null,"html_url":"https://github.com/lindelof/particles-bg-vue","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg-vue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg-vue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg-vue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lindelof%2Fparticles-bg-vue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lindelof","download_url":"https://codeload.github.com/lindelof/particles-bg-vue/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246720512,"owners_count":20822913,"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":["particle-bg","particles","particles-bg","vue-background","vue-particle","vue-particle-background","vue-particles","vue-resume","vuejs-particles"],"created_at":"2024-08-01T07:01:26.700Z","updated_at":"2025-04-01T22:31:15.792Z","avatar_url":"https://github.com/lindelof.png","language":"Vue","funding_links":[],"categories":["🚀 A series of exquisite and compact web page cool effects","Vue","Uncategorized"],"sub_categories":["Background Decoration","Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/lindelof/particles-bg-vue/blob/master/images/logo.png?raw=true\"/\u003e\n\u003c/p\u003e\n\n# particles-bg-vue\n\n[![NPM](https://img.shields.io/npm/v/particles-bg-vue.svg)](https://www.npmjs.com/package/particles-bg-vue) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n\u003e A vue.js particles animation background component. Use it to make your website look cool.\n\n### Check it out if you want to use it in `React` [https://github.com/lindelof/particles-bg](https://github.com/lindelof/particles-bg)\n\n## Specify\nThis project refers to the source code of the [Proton](https://drawcall.github.io/Proton/) official website, and proton's online [demo](https://codesandbox.io/s/proton-tadpole-yt6qu?fontsize=14\u0026module=%2Fsrc%2Fcomponents%2FParticles.vue). I packaged it into a vue.js component. Thanks to the great author.\n\n### Online demo\n* demo1 [https://codesandbox.io/s/particles-bg-vue-bg145](https://codesandbox.io/s/particles-bg-vue-bg145)\n* demo2 [https://codesandbox.io/s/particles-bg-vue-qc1b5](https://codesandbox.io/s/particles-bg-vue-qc1b5)\n* custom [https://codesandbox.io/s/particles-bg-vue-2fkvr](https://codesandbox.io/s/particles-bg-vue-2fkvr)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/01.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/02.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/03.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/04.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/05.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/06.jpg?raw=true)\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/07.jpg?raw=true)\n\n## Install\n\n```bash\nnpm install --save particles-bg-vue\n```\n\n## Usage\n\n### Method 1: Import and use in the component\n\n```vue\n\u003cparticles-bg type=\"lines\" :bg=\"true\" /\u003e\n...\n\nimport { ParticlesBg } from \"particles-bg-vue\";\nexport default {\n  name: \"App\",\n  components: {\n    ParticlesBg\n  }\n};\n```\n\n### Method 2: Use it globally\n```vue\nimport VueParticlesBg from \"particles-bg-vue\";\n\nVue.use(VueParticlesBg);\n\n....\n\u003cparticles-bg type=\"random\" :bg=\"true\" /\u003e\n```\n\n\n## Parameter Description\n```vue\n\u003cparticles-bg 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#### * canvas - canvas dom style\n```vue\n:canvas=\"canvasObject\"\n...\n```\n\n\n#### * bg - Set to html background\nIs set the following properties\n```css\nposition: \"absolute\",\nzIndex: -1,\ntop: 0,\nleft: 0\n```\n\n## About Custom\n\n![](https://github.com/lindelof/particles-bg-vue/blob/master/images/08.jpg?raw=true)\n\nYou can use type=\"custom\" to achieve a higher degree of freedom for the particle background.\n\n```vue\n  \u003cparticles-bg type=\"custom\" :config=\"config\" :bg=\"true\"/\u003e\n  ...\n\n  data: function() {\n    return {\n      config: {\n        num: [4, 7],\n        rps: 0.1,\n        radius: [5, 40],\n        life: [1.5, 3],\n        v: [2, 3],\n        tha: [-30, 30],\n        body: icon,\n        alpha: [0.6, 0],\n        scale: [0.1, 0.4],\n        position: \"all\",\n        cross: \"dead\",\n        random: 15\n      }\n    };\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-vue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flindelof%2Fparticles-bg-vue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flindelof%2Fparticles-bg-vue/lists"}