[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2870":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},2870,"particles.js","VincentGarreau\u002Fparticles.js","VincentGarreau","A lightweight JavaScript library for creating particles","https:\u002F\u002Fvincentgarreau.com\u002Fparticles.js\u002F",null,"JavaScript",30210,4828,556,308,0,3,31,9,45,"MIT License",false,"master",true,[],"2026-06-12 02:00:44","## particles.js\n\n### A lightweight JavaScript library for creating particles.\n\n------------------------------\n### `Demo \u002F Generator`\n\n\u003Ca href=\"http:\u002F\u002Fvincentgarreau.com\u002Fparticles.js\u002F\" target=\"_blank\">\u003Cimg src=\"http:\u002F\u002Fvincentgarreau.com\u002Fparticles.js\u002Fassets\u002Fimg\u002Fgithub-screen.jpg\" alt=\"particles.js generator\" \u002F>\u003C\u002Fa>\n\nConfigure, export, and share your particles.js configuration on CodePen: \u003Cbr \u002F>\nhttp:\u002F\u002Fvincentgarreau.com\u002Fparticles.js\u002F\n\nCodePen demo: \u003Cbr \u002F>\nhttp:\u002F\u002Fcodepen.io\u002FVincentGarreau\u002Fpen\u002Fpnlso\n\n-------------------------------\n### `Usage`\n\nLoad particles.js and configure the particles:\n\n**index.html**\n```html\n\u003Cdiv id=\"particles-js\">\u003C\u002Fdiv>\n\n\u003Cscript src=\"particles.js\">\u003C\u002Fscript>\n```\n\n**app.js**\n```javascript\n\u002F* particlesJS.load(@dom-id, @path-json, @callback (optional)); *\u002F\nparticlesJS.load('particles-js', 'assets\u002Fparticles.json', function() {\n  console.log('callback - particles.js config loaded');\n});\n```\n\n**particles.json**\n```javascript\n{\n  \"particles\": {\n    \"number\": {\n      \"value\": 80,\n      \"density\": {\n        \"enable\": true,\n        \"value_area\": 800\n      }\n    },\n    \"color\": {\n      \"value\": \"#ffffff\"\n    },\n    \"shape\": {\n      \"type\": \"circle\",\n      \"stroke\": {\n        \"width\": 0,\n        \"color\": \"#000000\"\n      },\n      \"polygon\": {\n        \"nb_sides\": 5\n      },\n      \"image\": {\n        \"src\": \"img\u002Fgithub.svg\",\n        \"width\": 100,\n        \"height\": 100\n      }\n    },\n    \"opacity\": {\n      \"value\": 0.5,\n      \"random\": false,\n      \"anim\": {\n        \"enable\": false,\n        \"speed\": 1,\n        \"opacity_min\": 0.1,\n        \"sync\": false\n      }\n    },\n    \"size\": {\n      \"value\": 10,\n      \"random\": true,\n      \"anim\": {\n        \"enable\": false,\n        \"speed\": 80,\n        \"size_min\": 0.1,\n        \"sync\": false\n      }\n    },\n    \"line_linked\": {\n      \"enable\": true,\n      \"distance\": 300,\n      \"color\": \"#ffffff\",\n      \"opacity\": 0.4,\n      \"width\": 2\n    },\n    \"move\": {\n      \"enable\": true,\n      \"speed\": 12,\n      \"direction\": \"none\",\n      \"random\": false,\n      \"straight\": false,\n      \"out_mode\": \"out\",\n      \"bounce\": false,\n      \"attract\": {\n        \"enable\": false,\n        \"rotateX\": 600,\n        \"rotateY\": 1200\n      }\n    }\n  },\n  \"interactivity\": {\n    \"detect_on\": \"canvas\",\n    \"events\": {\n      \"onhover\": {\n        \"enable\": false,\n        \"mode\": \"repulse\"\n      },\n      \"onclick\": {\n        \"enable\": true,\n        \"mode\": \"push\"\n      },\n      \"resize\": true\n    },\n    \"modes\": {\n      \"grab\": {\n        \"distance\": 800,\n        \"line_linked\": {\n          \"opacity\": 1\n        }\n      },\n      \"bubble\": {\n        \"distance\": 800,\n        \"size\": 80,\n        \"duration\": 2,\n        \"opacity\": 0.8,\n        \"speed\": 3\n      },\n      \"repulse\": {\n        \"distance\": 400,\n        \"duration\": 0.4\n      },\n      \"push\": {\n        \"particles_nb\": 4\n      },\n      \"remove\": {\n        \"particles_nb\": 2\n      }\n    }\n  },\n  \"retina_detect\": true\n}\n```\n\n-------------------------------\n\n### `Options`\n\nkey | option type \u002F notes | example\n----|---------|------\n`particles.number.value` | number | `40`\n`particles.number.density.enable` | boolean | `true` \u002F `false` \n`particles.number.density.value_area` | number | `800`\n`particles.color.value` | HEX (string) \u003Cbr \u002F> RGB (object) \u003Cbr \u002F> HSL (object) \u003Cbr \u002F> array selection (HEX) \u003Cbr \u002F> random (string) | `\"#b61924\"` \u003Cbr \u002F> `{r:182, g:25, b:36}` \u003Cbr \u002F>  `{h:356, s:76, l:41}` \u003Cbr \u002F> `[\"#b61924\", \"#333333\", \"999999\"]` \u003Cbr \u002F> `\"random\"`\n`particles.shape.type` | string \u003Cbr \u002F> array selection | `\"circle\"` \u003Cbr \u002F> `\"edge\"` \u003Cbr \u002F> `\"triangle\"` \u003Cbr \u002F> `\"polygon\"` \u003Cbr \u002F> `\"star\"` \u003Cbr \u002F> `\"image\"` \u003Cbr \u002F> `[\"circle\", \"triangle\", \"image\"]`\n`particles.shape.stroke.width` | number | `2`\n`particles.shape.stroke.color` | HEX (string) | `\"#222222\"`\n`particles.shape.polygon.nb_slides` | number | `5`\n`particles.shape.image.src` | path link \u003Cbr \u002F> svg \u002F png \u002F gif \u002F jpg | `\"assets\u002Fimg\u002Fyop.svg\"` \u003Cbr \u002F> `\"http:\u002F\u002Fmywebsite.com\u002Fassets\u002Fimg\u002Fyop.png\"`\n`particles.shape.image.width` | number \u003Cbr \u002F>(for aspect ratio) | `100`\n`particles.shape.image.height` | number \u003Cbr \u002F>(for aspect ratio) | `100`\n`particles.opacity.value` | number (0 to 1) | `0.75`\n`particles.opacity.random` | boolean | `true` \u002F `false` \n`particles.opacity.anim.enable` | boolean | `true` \u002F `false` \n`particles.opacity.anim.speed` | number | `3`\n`particles.opacity.anim.opacity_min` | number (0 to 1) | `0.25`\n`particles.opacity.anim.sync` | boolean | `true` \u002F `false`\n`particles.size.value` | number | `20`\n`particles.size.random` | boolean | `true` \u002F `false` \n`particles.size.anim.enable` | boolean | `true` \u002F `false` \n`particles.size.anim.speed` | number | `3`\n`particles.size.anim.size_min` | number | `0.25`\n`particles.size.anim.sync` | boolean | `true` \u002F `false`\n`particles.line_linked.enable` | boolean | `true` \u002F `false`\n`particles.line_linked.distance` | number | `150`\n`particles.line_linked.color` | HEX (string) | `#ffffff`\n`particles.line_linked.opacity` | number (0 to 1) | `0.5`\n`particles.line_linked.width` | number | `1.5`\n`particles.move.enable` | boolean | `true` \u002F `false`\n`particles.move.speed` | number | `4`\n`particles.move.direction` | string | `\"none\"` \u003Cbr \u002F> `\"top\"` \u003Cbr \u002F> `\"top-right\"` \u003Cbr \u002F> `\"right\"` \u003Cbr \u002F> `\"bottom-right\"` \u003Cbr \u002F> `\"bottom\"` \u003Cbr \u002F> `\"bottom-left\"` \u003Cbr \u002F> `\"left\"` \u003Cbr \u002F> `\"top-left\"`\n`particles.move.random` | boolean | `true` \u002F `false`\n`particles.move.straight` | boolean | `true` \u002F `false`\n`particles.move.out_mode` | string \u003Cbr \u002F> (out of canvas) | `\"out\"` \u003Cbr \u002F> `\"bounce\"`\n`particles.move.bounce` | boolean \u003Cbr \u002F> (between particles) | `true` \u002F `false`\n`particles.move.attract.enable` | boolean | `true` \u002F `false`\n`particles.move.attract.rotateX` | number | `3000`\n`particles.move.attract.rotateY` | number | `1500`\n`interactivity.detect_on` | string | `\"canvas\", \"window\"`\n`interactivity.events.onhover.enable` | boolean | `true` \u002F `false`\n`interactivity.events.onhover.mode` | string \u003Cbr \u002F> array selection | `\"grab\"` \u003Cbr \u002F> `\"bubble\"` \u003Cbr \u002F> `\"repulse\"` \u003Cbr \u002F> `[\"grab\", \"bubble\"]`\n`interactivity.events.onclick.enable` | boolean | `true` \u002F `false`\n`interactivity.events.onclick.mode` | string \u003Cbr \u002F> array selection | `\"push\"` \u003Cbr \u002F> `\"remove\"` \u003Cbr \u002F> `\"bubble\"` \u003Cbr \u002F> `\"repulse\"` \u003Cbr \u002F> `[\"push\", \"repulse\"]`\n`interactivity.events.resize` | boolean | `true` \u002F `false`\n`interactivity.events.modes.grab.distance` | number | `100`\n`interactivity.events.modes.grab.line_linked.opacity` | number (0 to 1) | `0.75`\n`interactivity.events.modes.bubble.distance` | number | `100`\n`interactivity.events.modes.bubble.size` | number | `40`\n`interactivity.events.modes.bubble.duration` | number \u003Cbr \u002F> (second) | `0.4`\n`interactivity.events.modes.repulse.distance` | number | `200`\n`interactivity.events.modes.repulse.duration` | number \u003Cbr \u002F> (second) | `1.2`\n`interactivity.events.modes.push.particles_nb` | number | `4`\n`interactivity.events.modes.push.particles_nb` | number | `4`\n`retina_detect` | boolean | `true` \u002F `false`\n\n-------------------------------\n\n### `Packages install`\n\n##### ***npm***\nhttps:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fparticles.js\n```\nnpm install particles.js\n```\n\n##### ***Bower***\n```\nbower install particles.js --save\n```\n\n##### ***Rails Assets***\n```\ngem 'rails-assets-particles.js'\n```\n\n##### ***Meteor***\nhttps:\u002F\u002Fatmospherejs.com\u002Fnewswim\u002Fparticles\n```\nmeteor add newswim:particles\n```\n\n-------------------------------\n\n### `Hosting \u002F CDN`\n\n***Please use this host or your own to load particles.js on your projects***\n\nhttp:\u002F\u002Fwww.jsdelivr.com\u002F#!particles.js\n","particles.js 是一个轻量级的 JavaScript 库，用于创建粒子效果。其核心功能包括通过简单的配置生成动态粒子动画，支持自定义粒子数量、颜色、形状、大小、移动方式等属性，并且可以响应用户交互（如鼠标点击和悬停）。该库采用 JSON 格式进行配置，便于开发者快速上手并调整效果。particles.js 适用于网页背景装饰、视觉增强以及需要添加动态元素以吸引用户的场景中，能够显著提升网站或应用的美观度与互动性。",2,"2026-06-11 02:51:18","top_language"]