{"id":19411657,"url":"https://github.com/levvolkov/particlesred","last_synced_at":"2026-06-20T10:31:56.983Z","repository":{"id":228210181,"uuid":"763416368","full_name":"levvolkov/particlesRed","owner":"levvolkov","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-26T08:56:41.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T02:34:17.007Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/levvolkov.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-26T08:55:22.000Z","updated_at":"2024-04-10T13:48:38.000Z","dependencies_parsed_at":"2024-03-17T16:47:40.819Z","dependency_job_id":"d582f075-8ad7-4e27-9784-ba12f32f1d4e","html_url":"https://github.com/levvolkov/particlesRed","commit_stats":null,"previous_names":["levvolkov/particlesred"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/levvolkov/particlesRed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2FparticlesRed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2FparticlesRed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2FparticlesRed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2FparticlesRed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/levvolkov","download_url":"https://codeload.github.com/levvolkov/particlesRed/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/levvolkov%2FparticlesRed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34566920,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-20T02:00:06.407Z","response_time":98,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-10T12:22:31.893Z","updated_at":"2026-06-20T10:31:56.966Z","avatar_url":"https://github.com/levvolkov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## particles.js\n\n### A lightweight JavaScript library for creating particles.\n\n------------------------------\n### `Demo / Generator`\n\n\u003ca href=\"http://vincentgarreau.com/particles.js/\" target=\"_blank\"\u003e\u003cimg src=\"http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg\" alt=\"particles.js generator\" /\u003e\u003c/a\u003e\n\nConfigure, export, and share your particles.js configuration on CodePen: \u003cbr /\u003e\nhttp://vincentgarreau.com/particles.js/\n\nCodePen demo: \u003cbr /\u003e\nhttp://codepen.io/VincentGarreau/pen/pnlso\n\n-------------------------------\n### `Usage`\n\nLoad particles.js and configure the particles:\n\n**index.html**\n```html\n\u003cdiv id=\"particles-js\"\u003e\u003c/div\u003e\n\n\u003cscript src=\"particles.js\"\u003e\u003c/script\u003e\n```\n\n**app.js**\n```javascript\n/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */\nparticlesJS.load('particles-js', 'assets/particles.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/github.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 / notes | example\n----|---------|------\n`particles.number.value` | number | `40`\n`particles.number.density.enable` | boolean | `true` / `false` \n`particles.number.density.value_area` | number | `800`\n`particles.color.value` | HEX (string) \u003cbr /\u003e RGB (object) \u003cbr /\u003e HSL (object) \u003cbr /\u003e array selection (HEX) \u003cbr /\u003e random (string) | `\"#b61924\"` \u003cbr /\u003e `{r:182, g:25, b:36}` \u003cbr /\u003e  `{h:356, s:76, l:41}` \u003cbr /\u003e `[\"#b61924\", \"#333333\", \"999999\"]` \u003cbr /\u003e `\"random\"`\n`particles.shape.type` | string \u003cbr /\u003e array selection | `\"circle\"` \u003cbr /\u003e `\"edge\"` \u003cbr /\u003e `\"triangle\"` \u003cbr /\u003e `\"polygon\"` \u003cbr /\u003e `\"star\"` \u003cbr /\u003e `\"image\"` \u003cbr /\u003e `[\"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 /\u003e svg / png / gif / jpg | `\"assets/img/yop.svg\"` \u003cbr /\u003e `\"http://mywebsite.com/assets/img/yop.png\"`\n`particles.shape.image.width` | number \u003cbr /\u003e(for aspect ratio) | `100`\n`particles.shape.image.height` | number \u003cbr /\u003e(for aspect ratio) | `100`\n`particles.opacity.value` | number (0 to 1) | `0.75`\n`particles.opacity.random` | boolean | `true` / `false` \n`particles.opacity.anim.enable` | boolean | `true` / `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` / `false`\n`particles.size.value` | number | `20`\n`particles.size.random` | boolean | `true` / `false` \n`particles.size.anim.enable` | boolean | `true` / `false` \n`particles.size.anim.speed` | number | `3`\n`particles.size.anim.size_min` | number | `0.25`\n`particles.size.anim.sync` | boolean | `true` / `false`\n`particles.line_linked.enable` | boolean | `true` / `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` / `false`\n`particles.move.speed` | number | `4`\n`particles.move.direction` | string | `\"none\"` \u003cbr /\u003e `\"top\"` \u003cbr /\u003e `\"top-right\"` \u003cbr /\u003e `\"right\"` \u003cbr /\u003e `\"bottom-right\"` \u003cbr /\u003e `\"bottom\"` \u003cbr /\u003e `\"bottom-left\"` \u003cbr /\u003e `\"left\"` \u003cbr /\u003e `\"top-left\"`\n`particles.move.random` | boolean | `true` / `false`\n`particles.move.straight` | boolean | `true` / `false`\n`particles.move.out_mode` | string \u003cbr /\u003e (out of canvas) | `\"out\"` \u003cbr /\u003e `\"bounce\"`\n`particles.move.bounce` | boolean \u003cbr /\u003e (between particles) | `true` / `false`\n`particles.move.attract.enable` | boolean | `true` / `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` / `false`\n`interactivity.events.onhover.mode` | string \u003cbr /\u003e array selection | `\"grab\"` \u003cbr /\u003e `\"bubble\"` \u003cbr /\u003e `\"repulse\"` \u003cbr /\u003e `[\"grab\", \"bubble\"]`\n`interactivity.events.onclick.enable` | boolean | `true` / `false`\n`interactivity.events.onclick.mode` | string \u003cbr /\u003e array selection | `\"push\"` \u003cbr /\u003e `\"remove\"` \u003cbr /\u003e `\"bubble\"` \u003cbr /\u003e `\"repulse\"` \u003cbr /\u003e `[\"push\", \"repulse\"]`\n`interactivity.events.resize` | boolean | `true` / `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 /\u003e (second) | `0.4`\n`interactivity.events.modes.repulse.distance` | number | `200`\n`interactivity.events.modes.repulse.duration` | number \u003cbr /\u003e (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` / `false`\n\n-------------------------------\n\n### `Packages install`\n\n##### ***npm***\nhttps://www.npmjs.com/package/particles.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://atmospherejs.com/newswim/particles\n```\nmeteor add newswim:particles\n```\n\n-------------------------------\n\n### `Hosting / CDN`\n\n***Please use this host or your own to load particles.js on your projects***\n\nhttp://www.jsdelivr.com/#!particles.js\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevvolkov%2Fparticlesred","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flevvolkov%2Fparticlesred","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flevvolkov%2Fparticlesred/lists"}