{"id":13409042,"url":"https://github.com/tipsy/bubbly-bg","last_synced_at":"2025-05-15T08:10:28.751Z","repository":{"id":57190873,"uuid":"105246086","full_name":"tipsy/bubbly-bg","owner":"tipsy","description":"Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped)","archived":false,"fork":false,"pushed_at":"2023-04-09T01:17:42.000Z","size":2852,"stargazers_count":1618,"open_issues_count":0,"forks_count":97,"subscribers_count":30,"default_branch":"master","last_synced_at":"2025-04-14T14:59:46.058Z","etag":null,"topics":["animated-backgrounds","canvas","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tipsy.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}},"created_at":"2017-09-29T08:00:47.000Z","updated_at":"2025-02-11T17:11:55.000Z","dependencies_parsed_at":"2022-09-15T15:51:26.707Z","dependency_job_id":"3be14db0-7f6d-491d-9ba4-9cee8dd344bc","html_url":"https://github.com/tipsy/bubbly-bg","commit_stats":{"total_commits":81,"total_committers":6,"mean_commits":13.5,"dds":0.07407407407407407,"last_synced_commit":"b5c5f44aa1ddd24a32a97f8faa1a1b75fd8b23c2"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tipsy%2Fbubbly-bg","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tipsy%2Fbubbly-bg/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tipsy%2Fbubbly-bg/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tipsy%2Fbubbly-bg/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tipsy","download_url":"https://codeload.github.com/tipsy/bubbly-bg/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254301433,"owners_count":22047904,"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":["animated-backgrounds","canvas","javascript"],"created_at":"2024-07-30T20:00:57.521Z","updated_at":"2025-05-15T08:10:28.702Z","avatar_url":"https://github.com/tipsy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Libraries",":clap: 欢迎参与​","Repository"],"sub_categories":["Particle animation","ui框架","Animation"],"readme":"## bubbly-bg\n\nBeautiful bubbly backgrounds in less than 1kB (750 bytes gzipped).\n\n### Usage\nAdd bubbly to your webpage and call `bubbly()`: \n```html\n\u003cbody\u003e\n  ...\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003ebubbly();\u003c/script\u003e\n\u003c/body\u003e\n```\n\nBubbly creates a `canvas` element and appends it to the `body`. \nThis element has `position: fixed` and `z-index: -1`, and always fills the\nwidth/height of the viewport, which should make it plug and play for most projects.\n\nYou can also use bubbly with a canvas you create yourself,\nby including `{canvas: yourCanvas}` in the configuration.\n\n# Live demo: https://tipsy.github.io/bubbly-bg\n\n## Config generator: https://tipsy.github.io/bubbly-bg/generator    \n\n### Gif demo:\n![Bubbly animated](https://tipsy.github.io/bubbly-bg/bubbly.gif)\n\n### PNG demo:\n![Bubbly examples](https://tipsy.github.io/bubbly-bg/bubbly.png)\n\n### Installation\n* cdn: https://cdn.jsdelivr.net/npm/bubbly-bg@1.0.0/dist/bubbly-bg.js\n* node: `npm install bubbly-bg`\n* download: https://raw.githubusercontent.com/tipsy/bubbly-bg/master/dist/bubbly-bg.js\n\n### Configuration / Docs / Options\n\n```javascript\nbubbly({\n    canvas: document.querySelector(\"#background\"), // default is created and attached automatically\n    compose: \"lighter\", // default is \"lighter\"\n    animate: false, // default is true\n    bubbles: Math.random() * 100, // default is Math.floor((canvas.width + canvas.height) * 0.02);\n    shadowColor: \"#0ff\", // default is #fff\n    shadowBlur: 1, // default is 4\n    fillFunc: () =\u003e `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`, // default is () =\u003e `hsla(0, 0%, 100%, ${r() * 0.1})`)\n    angleFunc: () =\u003e Math.random() * Math.PI * 2, // default is this\n    velocityFunc: () =\u003e 0.1 + Math.random() * 0.5, // default is this\n    radiusFunc: () =\u003e 4 + Math.random() * 25 // default is 4 + Math.random() * width / 25\n});\n```\n\n### Config from examples\n\n#### Blue with white bubbles\n```javascript\nbubbly();\n```\n\n#### Black/red with red bubbles\n```javascript\nbubbly({\n    gradientStart: \"#111\",\n    gradientStop: \"#422\",\n    fillFunc: () =\u003e `hsla(0, 100%, 50%, ${Math.random() * 0.25})`\n});\n```\n\n#### Purple with multicolored bubbles\n```javascript\nbubbly({\n    gradientStart: \"#4c004c\",\n    gradientStop: \"#1a001a\",\n    fillFunc: () =\u003e `hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.25})`\n});\n```\n\n#### Yellow/pink with red/orange/yellow bubbles\n```javascript\nbubbly({\n    gradientStart: \"#fff4e6\",\n    gradientStop: \"#ffe9e4\",\n    shadowBlur: 1,\n    compose: \"source-over\",\n    fillFunc: () =\u003e `hsla(${Math.random() * 50}, 100%, 50%, .3)`\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftipsy%2Fbubbly-bg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftipsy%2Fbubbly-bg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftipsy%2Fbubbly-bg/lists"}