{"id":20279038,"url":"https://github.com/t-vk/superparticles","last_synced_at":"2025-07-20T17:37:08.490Z","repository":{"id":107367392,"uuid":"168933672","full_name":"T-vK/SuperParticles","owner":"T-vK","description":"Amazing CPU-friendly particle network animations","archived":false,"fork":false,"pushed_at":"2022-08-08T22:27:55.000Z","size":883,"stargazers_count":38,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-09T15:55:34.060Z","etag":null,"topics":["efficient","fps","js","particles","particles-js","performance","pixi"],"latest_commit_sha":null,"homepage":"https://t-vk.github.io/SuperParticles/demo.html","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/T-vK.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,"publiccode":null,"codemeta":null}},"created_at":"2019-02-03T10:31:01.000Z","updated_at":"2025-04-28T20:47:05.000Z","dependencies_parsed_at":"2023-05-17T06:30:46.393Z","dependency_job_id":null,"html_url":"https://github.com/T-vK/SuperParticles","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/T-vK/SuperParticles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T-vK%2FSuperParticles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T-vK%2FSuperParticles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T-vK%2FSuperParticles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T-vK%2FSuperParticles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/T-vK","download_url":"https://codeload.github.com/T-vK/SuperParticles/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/T-vK%2FSuperParticles/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266166972,"owners_count":23886899,"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":["efficient","fps","js","particles","particles-js","performance","pixi"],"created_at":"2024-11-14T13:27:50.639Z","updated_at":"2025-07-20T17:37:08.468Z","avatar_url":"https://github.com/T-vK.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SuperParticles\n\nPerformance-focused alternative to [VincentGarreau's particles.js](https://github.com/VincentGarreau/particles.js)\n\n## Introduction\nSuperParticles aims at resolving the major performance issues that come with particles.js, by using WebGL when possible and also by allowing you to limit the frame rate (FPS).\nIf you have more ideas on what could be done to further improve the performance, feel free to open an issue.\n\n## GIF Demo\n[![Video](SuperParticlesVideo.gif)](https://t-vk.github.io/SuperParticles/demo.html)\n\n## Live Demo\nhttps://t-vk.github.io/SuperParticles/demo.html\n\n## How To Use\n\nJquery is optional, but recommended.\nPixi.js is required (preferrably in a version above 5.0.0-rc):\n``` HTML\n\u003cscript src=\"https://code.jquery.com/jquery-1.12.0.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://pixijs.download/dev-graphics-batch-pool/pixi.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/T-vK/SuperParticles@master/SuperParticles.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n    window.onload = function(){\n        var superParticles = new SuperParticles()\n    }\n\u003c/script\u003e\n```\n\nIf you want, you can pass a div container to SuperParticles which then will be used to render the particles:\n\n``` HTML\n\u003cbody\u003e\n    \u003cscript src=\"https://code.jquery.com/jquery-1.12.0.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://pixijs.download/dev-graphics-batch-pool/pixi.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/gh/T-vK/SuperParticles@master/SuperParticles.js\"\u003e\u003c/script\u003e\n    \u003cdiv id=\"super-particles\"\u003e\u003c/div\u003e\n\n    \u003cscript\u003e\n        window.onload = function(){\n            var divContainer = '#super-particles'\n            new SuperParticles({\n                container: divContainer\n            })\n        }\n    \u003c/script\u003e\n\u003c/body\u003e\n```\n\nYou can limit the FPS like this:\n``` JavaScript\nnew SuperParticles({\n    maxFps: 30\n})\n```\n\n## API\n\n### new SuperParticles(cfg)\nCreates a new SuperParticles instance.  \n\ncfg defaults to:\n\n``` JavaScript\n{\n    useJquery: undefined, // true/false/undefined\n    maxFps: 30, // requires pixi.js v5\n    autoStartAnimation: true, // true/false\n    container: {\n        element: undefined,\n        backgroundCssRule: \"radial-gradient(ellipse at center, rgba(10,46,56,1) 0%,rgba(34,34,34,1) 70%)\" // css or null (null: don't modify container background)\n    },\n    pixiApp: { // these are documented here: http://pixijs.download/release/docs/PIXI.Application.html#Application\n        antialias: true,\n        transparent: true,\n        forceFXAA: false,\n        powerPreference: 'high-performance',\n        resolution: 1.0\n    },\n    particles: {\n        amount: 80, // unit: particles\n        radius: 2, // unit: pixels\n        velocity : 10, // unit: pixels/second\n        color: \"0xFFFFFF\", // unit: rgb hex color\n        fadeInDuration: 3000, // unit: milliseconds\n        fadeOutDuration: 600, // unit: milliseconds\n        keepRelativePositionOnResize: true, // true/false\n    },\n    lines: {\n        minDistance: 0.09, // unit: percent (1: 100%; 0: 0%\n        color: \"0xFFFFFF\", // unit: hex color\n        maxOpacity: 0.4, // 1: full opacity; 0: no opacity\n        thickness: 1, // unit: pixels\n        distanceBasedTransparency: true, // true/false\n    },\n    debug: {\n        showFps: false, // true/false\n    }\n}\n```\n\nbut you can overwrite individual properties if you like.\n\n### superParticles.stopAnimation()\n\nPauses the SuperParticles instance.\n\n### superParticles.startAnimation()\n\nResume the SuperParticles instance.\n\n### superParticles.destroy()\n\nDestroys the SuperParticles instance. (If you want to reuse the instance afterwards, you have to call reinit first!)\n\n### superParticles.reinit()\n\nReinitializes the instance. (Useful after destroying it.)\n\n### superParticles.cfg\n\nThis is the config object of the instance. You can overwrite the cfg object during runtime.\nE.g. `superParticles.cfg = { pixiApp: { antialiasing: true } }`  \nDon't do `superParticles.cfg.pixiApp.antialiasing = true`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft-vk%2Fsuperparticles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ft-vk%2Fsuperparticles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ft-vk%2Fsuperparticles/lists"}