{"id":17315976,"url":"https://github.com/bmsvieira/bvambient","last_synced_at":"2025-04-14T14:52:23.154Z","repository":{"id":111617608,"uuid":"316834071","full_name":"BMSVieira/BVAmbient","owner":"BMSVieira","description":"BVAmbient - Vanilla Javascript Background Particles","archived":false,"fork":false,"pushed_at":"2020-12-03T00:10:04.000Z","size":993,"stargazers_count":23,"open_issues_count":0,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T03:41:33.662Z","etag":null,"topics":["frontend","javascript","particles","vanillajs","webdesign"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/BMSVieira.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-11-28T22:35:57.000Z","updated_at":"2024-07-28T03:55:59.000Z","dependencies_parsed_at":"2024-01-14T17:05:44.974Z","dependency_job_id":"8d7c0cbb-18d3-4c20-9b27-f0f92cb64526","html_url":"https://github.com/BMSVieira/BVAmbient","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/BMSVieira%2FBVAmbient","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FBVAmbient/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FBVAmbient/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BMSVieira%2FBVAmbient/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BMSVieira","download_url":"https://codeload.github.com/BMSVieira/BVAmbient/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248900815,"owners_count":21180289,"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":["frontend","javascript","particles","vanillajs","webdesign"],"created_at":"2024-10-15T13:11:12.402Z","updated_at":"2025-04-14T14:52:23.073Z","avatar_url":"https://github.com/BMSVieira.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"BVAmbient - Vanilla Javascript Background Particles \n--\n\u003cp align=\"center\"\u003e\n\u003cimg width=\"500\" src=\"https://raw.githubusercontent.com/BMSVieira/BVAmbient/main/demo-template/images/BV.png\"\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003e\nEasy-to-use Particle Background built with VanillaJS\n\u003c/p\u003e\n\nAbout:\n-\nThere are many good particle libraries out there, however, it's hard to find one that doesn't use canvas or jquery ... so the challenge was to create high-performance, fully customizable background particles without using either, even though you know that will have its own limitations.\n\nFeatures:\n-\n- 🔧 Fully Customizable\n- 💪 No Dependencies, built with VanillaJS\n- 🌎 Tested in All Modern Browsers\n- 😎 Image Support\n- 💻 Responsive\n- 📈 HTML Elements (not canvas)\n\n\nDemo:\n-\nhttps://bmsvieira.github.io/BVAmbient/\n\nInstallation:\n-\n\n1 - Include JavaScript Source.\n```javascript\n\u003cscript src=\"path/to/bvambient.js\"\u003e\u003c/script\u003e\n```\n2 - Include Styles.\n```javascript\n\u003clink rel=\"stylesheet\" href=\"path/to/bvambient.css\"\u003e\n```\n4 - Set HTML.\n```javascript\n \u003cdiv id=\"ambient\"\u003e\u003c/div\u003e\n```\n3 - Initilize.\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n      var demo1 = new BVAmbient({\n            selector: \"#ambient\",\n            fps: 60,\n            max_transition_speed: 12000,\n            min_transition_speed: 8000,\n            particle_number: 30,\n            particle_maxwidth: 30,\n            particle_minwidth: 10,\n            particle_radius: 50,\n            particle_opacity: true,\n            particle_colision_change: true,\n            particle_background: \"#58c70c\"\n      });\n});\n```\nMethods:\n-\n\u003cb\u003eAdd:\u003c/b\u003e\nAdd new particles\n\n| Value | Description |\n| --- | --- |\n| `Integer` | Number of particles to add |\n\n```javascript\ndemo1.Add(5);\n```\n\n\u003cb\u003eRefresh:\u003c/b\u003e\nRemoves all current elements and builds a new Ambient\n\n```javascript\ndemo1.Refresh();\n```\n\n\u003cb\u003eDestroy:\u003c/b\u003e\nRemoves all particles and unbind its events\n\n```javascript\ndemo1.Destroy();\n```\n\n\u003cb\u003eChange:\u003c/b\u003e\nApplies changes to current particles\n\n| Name | Value | Description |\n| --- | --- | --- |\n| `type` | `particle_background` | Parameter |\n| `value` | `string` | Value to apply |\n\n```javascript\ndemo1.Change({\n    type: \"particle_background\",\n    value: \"#1e81d9\"\n});\n```\n\nSettings:\n-\n| Option | Type | Default | Description |\n| --- | --- | --- | --- |\n| `selector` | `String`  | `---` |  Specify ID of the element|\n| `fps` | `Integer` | `60` | Frames per second |\n| `max_transition_speed` | `Integer` | `12000` |  Max transition speed (ms)|\n| `min_transition_speed` | `Integer` | `8000` |  Min transition speed (ms)|\n| `particle_number` | `Integer` | `50` |  Number of particles|\n| `particle_maxwidth` | `Integer` | `30` |  Particle's max width (px) |\n| `particle_minwidth` | `Integer` | `10` | Particle's min width (px) |\n| `particle_radius` | `Integer` | `50` | Particle's border radius (px) \n| `particle_opacity` | `Boolean` | `true` | Apply random opacity between `0.2` and `1` to particles |\n| `particle_colision_change` | `Boolean` | `true` | Particle changes size when collides with main div's boundary |\n| `particle_background` | `string` | `#58c70c` or `random` | `Hex` or `Rgba`, `random` generates a random color when loading or colliding |\n| `particle_image` | `Object` | `false` | Add image to particles |\n| `responsive` | `Object` | `default width` | Different settings according to viewport width to improve performance |\n| `refresh_onfocus` | `Boolean` | `true` | Refresh ambient when user changes tab |\n\n\u003cb\u003eFull Example:\u003c/b\u003e\n\n```javascript\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n      var demo1 = new BVAmbient({\n        selector: \"#ambient\",\n        fps: 60,\n        max_transition_speed: 12000, // speed will be randomized between max and min\n        min_transition_speed: 8000,\n        particle_number: 30,\n        particle_maxwidth: 30,\n        particle_minwidth: 10,\n        particle_radius: 50,\n        particle_opacity: true,\n        particle_colision_change: true,\n        particle_background: \"#58c70c\",\n        refresh_onfocus: true,\n        particle_image: {\n          image: false,\n          src: \"\"\n        },\n        responsive: [\n            {\n              breakpoint: 768,\n              settings: {\n                particle_number: \"15\"\n              }\n            },\n            {\n              breakpoint: 480,\n              settings: {\n                particle_number: \"10\"\n              }\n            }\n        ]\n      });\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmsvieira%2Fbvambient","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbmsvieira%2Fbvambient","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbmsvieira%2Fbvambient/lists"}