{"id":13469557,"url":"https://github.com/crashmax-dev/fireworks-js","last_synced_at":"2025-05-14T15:06:52.613Z","repository":{"id":38029218,"uuid":"330684870","full_name":"crashmax-dev/fireworks-js","owner":"crashmax-dev","description":"🎆 A simple fireworks library! Ready to use components available for React, Vue 3, Svelte, Angular, Preact, Solid, and Web Components.","archived":false,"fork":false,"pushed_at":"2024-07-16T05:50:27.000Z","size":4367,"stargazers_count":1267,"open_issues_count":9,"forks_count":90,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-12T05:02:36.275Z","etag":null,"topics":["angular","animation","canvas","fireworks","hacktoberfest","javascript","library","monorepository","npm-package","particles","preact","react","solidjs","svelte","typescript","vue","vue3","web-components","zero-dependency"],"latest_commit_sha":null,"homepage":"https://fireworks.js.org","language":"TypeScript","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/crashmax-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"2021-01-18T14:05:03.000Z","updated_at":"2025-05-10T14:07:11.000Z","dependencies_parsed_at":"2024-06-18T13:35:53.279Z","dependency_job_id":"51e830ee-19b3-494b-965d-c871b94e4c16","html_url":"https://github.com/crashmax-dev/fireworks-js","commit_stats":{"total_commits":386,"total_committers":13,"mean_commits":"29.692307692307693","dds":0.3471502590673575,"last_synced_commit":"8f01eeaef422c1f0880e94ce99040025a1b74d7e"},"previous_names":[],"tags_count":48,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ffireworks-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ffireworks-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ffireworks-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/crashmax-dev%2Ffireworks-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/crashmax-dev","download_url":"https://codeload.github.com/crashmax-dev/fireworks-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254169172,"owners_count":22026209,"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":["angular","animation","canvas","fireworks","hacktoberfest","javascript","library","monorepository","npm-package","particles","preact","react","solidjs","svelte","typescript","vue","vue3","web-components","zero-dependency"],"created_at":"2024-07-31T15:01:44.796Z","updated_at":"2025-05-14T15:06:52.510Z","avatar_url":"https://github.com/crashmax-dev.png","language":"TypeScript","readme":"[![](https://fireworks.js.org/images/fireworks_banner.gif)](https://fireworks.js.org)\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eA simple fireworks library! | \u003ca href=\"https://fireworks.js.org\"\u003efireworks.js.org\u003c/a\u003e\u003c/b\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.upwork.com/o/companies/~01e5f1563365e3c1b5/\"\u003e\n    \u003cpicture\u003e\n      \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://r3-dev.github.io/brand/badge-light.svg\"\u003e\n      \u003cimg src=\"https://r3-dev.github.io/brand/badge-dark.svg\" /\u003e\n    \u003c/picture\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/crashmax-dev/fireworks-js/actions\"\u003e\n    \u003cimg alt=\"GitHub Workflow Status\" src=\"https://img.shields.io/github/actions/workflow/status/crashmax-dev/fireworks-js/gh-pages.yml?branch=master\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/crashmax-dev/fireworks-js/blob/master/LICENSE\"\u003e\n    \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/crashmax-dev/fireworks-js?color=success\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fireworks-js\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/fireworks-js?color=orange\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/fireworks-js\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/fireworks-js?color=blue\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/package/fireworks-js@latest\"\u003e\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/fireworks-js\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Table of Contents\n\n\u003e **Warning**\\\n\u003e This readme refers to upcoming v2 version, [read here](https://github.com/crashmax-dev/fireworks-js/tree/v1) for v1 documentation.\n\n- [Features](#features)\n- [Browsers support](#browsers-support)\n- [Demo](#demo)\n- [Installation](#installation)\n- [CDN](#cdn)\n- [Usage](#usage)\n  - [fireworks-js](#fireworks-js)\n  - [@fireworks-js/react](#fireworks-jsreact)\n  - [@fireworks-js/preact](#fireworks-jspreact)\n  - [@fireworks-js/solid](#fireworks-jssolid)\n  - [@fireworks-js/vue](#fireworks-jsvue)\n  - [@fireworks-js/svelte](#fireworks-jssvelte)\n  - [@fireworks-js/angular](#fireworks-jsangular)\n  - [@fireworks-js/web](#fireworks-jsweb)\n- [Documentation](#documentation)\n  - [Options](#options)\n  - [API](#api)\n- [Community](#community)\n\n## Features\n\n - 🔥 Zero [dependencies](https://www.npmjs.com/package/fireworks-js?activeTab=dependencies)\n - ⚙️ Flexible [configuration](#options)\n - 📦 Lightweight ([~3.0kB gzipped](https://bundlephobia.com/package/fireworks-js))\n - 📜 Supports [TypeScript](https://www.typescriptlang.org) type definition\n\n## Browsers support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eEdge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eOpera | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/yandex/yandex_48x48.png\" alt=\"Yandex\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr/\u003eYandex |\n| --------- | --------- | --------- | --------- | --------- | --------- | --------- |\n| ✔ | ✔ | ✔ | ✔ | ✔ | ✔ | ✔\n\n## Demo\n\nYou can play with `fireworks-js` at [fireworks.js.org](https://fireworks.js.org) or [stackblitz.com](https://stackblitz.com/edit/fireworks-js-react?file=src%2FApp.tsx)\n\n## Installation\n\n```sh\nnpm install fireworks-js\n```\n\n```sh\nyarn add fireworks-js\n```\n\n```sh\npnpm add fireworks-js\n```\n\n| Package | Status | Description |\n| ------- | ------ | ----------- |\n| [fireworks-js](#fireworks-js) | [![](https://img.shields.io/npm/v/fireworks-js)](https://npm.im/fireworks-js) | Vanilla JS |\n| [@fireworks-js/react](#fireworks-jsreact) | [![](https://img.shields.io/npm/v/@fireworks-js/react.svg)](https://npm.im/@fireworks-js/react) | React component |\n| [@fireworks-js/preact](#fireworks-jspreact) | [![](https://img.shields.io/npm/v/@fireworks-js/preact.svg)](https://npm.im/@fireworks-js/preact) | Preact component |\n| [@fireworks-js/solid](#fireworks-jssolid) | [![](https://img.shields.io/npm/v/@fireworks-js/solid.svg)](https://npm.im/@fireworks-js/solid) | Solid component |\n| [@fireworks-js/vue](#fireworks-jsvue) | [![](https://img.shields.io/npm/v/@fireworks-js/vue.svg)](https://npm.im/@fireworks-js/vue) | Vue 3 component |\n| [@fireworks-js/svelte](#fireworks-jssvelte) | [![](https://img.shields.io/npm/v/@fireworks-js/svelte.svg)](https://npm.im/@fireworks-js/svelte) | Svelte component |\n| [@fireworks-js/angular](#fireworks-jsangular) | [![](https://img.shields.io/npm/v/@fireworks-js/angular.svg)](https://npm.im/@fireworks-js/angular) | Angular component |\n| [@fireworks-js/web](#fireworks-jsweb) | [![](https://img.shields.io/npm/v/@fireworks-js/web.svg)](https://npm.im/@fireworks-js/web) | Web components |\n\n# CDN\n\n```html\n\u003c!-- jsDelivr  --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/fireworks-js@2.x/dist/index.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- UNPKG --\u003e\n\u003cscript src=\"https://unpkg.com/fireworks-js@2.x/dist/index.umd.js\"\u003e\u003c/script\u003e\n\n\u003c!-- Usage --\u003e\n\u003cscript\u003e\n  const container = document.querySelector('.fireworks')\n  const fireworks = new Fireworks.default(container)\n  fireworks.start()\n\u003c/script\u003e\n```\n\n## Usage\n\n#### [`fireworks-js`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/basic)\n\n```js\nimport { Fireworks } from 'fireworks-js'\n\nconst container = document.querySelector('.container')\nconst fireworks = new Fireworks(container, { /* options */ })\nfireworks.start()\n```\n\n#### [`@fireworks-js/react`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-react)\n\n```sh\nnpm install @fireworks-js/react\n```\n\n#### [`@fireworks-js/preact`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-preact)\n\n```sh\nnpm install @fireworks-js/preact\n```\n\n#### [`@fireworks-js/solid`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-solid)\n\n```sh\nnpm install @fireworks-js/solid\n```\n\n#### [`@fireworks-js/vue`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-vue)\n\n```sh\nnpm install @fireworks-js/vue\n```\n\n#### [`@fireworks-js/svelte`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-svelte)\n\n```sh\nnpm install @fireworks-js/svelte\n```\n\n#### [`@fireworks-js/angular`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-angular)\n\n```sh\nnpm install @fireworks-js/angular\n```\n\n#### [`@fireworks-js/web`](https://github.com/crashmax-dev/fireworks-js/tree/master/examples/with-web-components)\n\n```sh\nnpm install @fireworks-js/web\n```\n\n## Documentation\n\n### Options\n\n\u003e **Note**\\\n\u003e The options is optional, as are each of its properties.\n\n| Property           | Type                | Default                                                                       |\n| ------------------ | ------------------- | ----------------------------------------------------------------------------- |\n| `hue`              | object              | [hue](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L49-L52)                                     |\n| `rocketsPoint`     | object              | [rocketsPoint](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L54-L57)                                     |\n| `mouse`            | object              | [mouse](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L70-L74)                                     |\n| `boundaries`       | object              | [boundaries](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L104-L110)                                   |\n| `sound`            | object              | [sound](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L91-L102)                                    |\n| `delay`            | object              | [delay](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L76-L79)                                     |\n| `brightness`       | object              | [brightness](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L81-L84)                                     |\n| `decay`            | object              | [decay](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L86-L89)                                     |\n| `lineWidth`        | object              | [lineWidth](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L59-L68)                                     |\n| `lineStyle`        | string              | round                                                                         |\n| `explosion`        | number              | 5                                                                             |\n| `opacity`          | number              | 0.5                                                                           |\n| `acceleration`     | number              | 1.05                                                                          |\n| `friction`         | number              | 0.95                                                                          |\n| `gravity`          | number              | 1.5                                                                           |\n| `particles`        | number              | 50                                                                            |\n| `traceLength`      | number              | 3                                                                             |\n| `flickering`       | number              | 50                                                                            |\n| `intensity`        | number              | 30                                                                            |\n| `traceSpeed`       | number              | 10                                                                            |\n| `intensity`        | number              | 30                                                                            |\n| `autoresize`       | boolean             | true                                                                          |\n\nThe `hue`, `delay`, `decay`, `brightness`, `lineWidth.explosion`, `lineWidth.trace`, `sound.volume` and `rocketsPoint` options accept an object:\n\n| Property | Type    |\n| -------- | ------- |\n| `min`    | number  |\n| `max`    | number  |\n\n\u003e **Note**\\\n\u003e The `min` and `max` properties are used to randomly select values from the range.\n\nThe `mouse` options accept an object:\n\n| Property | Type    | Default |\n| -------- | ------- | ------- |\n| `click`  | boolean | false   |\n| `move`   | boolean | false   |\n| `max`    | number  | 1       |\n\n\u003e **Note**\\\n\u003e The `max` property has no effect if `click` is false.\n\nThe `sound` options accept an object:\n\n| Property   | Type      | Default             |\n| ---------- | --------- | ------------------- |\n| `enabled`  | boolean   | false               |\n| `files`    | string[]  | [files](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L93-L97)  |\n| `volume`   | object    | [volume](https://github.com/crashmax-dev/fireworks-js/blob/eedee4020e9c458fde83b60dfac6f2502d4593bb/packages/fireworks-js/src/options.ts#L98-L101) |\n\n```js\nconst fireworks = new Fireworks(container, {\n  autoresize: true,\n  opacity: 0.5,\n  acceleration: 1.05,\n  friction: 0.97,\n  gravity: 1.5,\n  particles: 50,\n  traceLength: 3,\n  traceSpeed: 10,\n  explosion: 5,\n  intensity: 30,\n  flickering: 50,\n  lineStyle: 'round',\n  hue: {\n    min: 0,\n    max: 360\n  },\n  delay: {\n    min: 30,\n    max: 60\n  },\n  rocketsPoint: {\n    min: 50,\n    max: 50\n  },\n  lineWidth: {\n    explosion: {\n      min: 1,\n      max: 3\n    },\n    trace: {\n      min: 1,\n      max: 2\n    }\n  },\n  brightness: {\n    min: 50,\n    max: 80\n  },\n  decay: {\n    min: 0.015,\n    max: 0.03\n  },\n  mouse: {\n    click: false,\n    move: false,\n    max: 1\n  }\n})\n```\n\n### API\n\n#### `.start()`\nStart fireworks.\n\n#### `.launch(count)`\nLaunching a specified number of fireworks.\\\nType: `number`\\\nDefault `1`\n\n#### `.stop(dispose)`\nStop fireworks.\\\nType: `boolean`\\\nDefault: `false`\n\n#### `.waitStop(dispose)`\nAsynchronous stopping of the fireworks.\\\nType: `boolean`\\\nDefault: `false`\n\n#### `.pause()`\nStart/stop fireworks.\n\n#### `.clear()`\nCleaning the canvas from fireworks.\n\n#### `.currentOptions`\nGetting current fireworks options.\n\n#### `.updateOptions(options)`\nForce update fireworks options.\\\nType: [`options`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L3-L25)\n\n#### `.updateSize(sizes)`\nForce update canvas size.\\\nType: [`sizes`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L58-L61)\n\n#### `.updateBoundaries(boundaries)`\nForce update canvas boundaries.\\\nType: [`boundaries`](https://github.com/crashmax-dev/fireworks-js/blob/6819ec8456ecb97140a8e1f41959ca2da5c17ddf/packages/fireworks-js/src/types.ts#L35-L40)\n\n## Community\n\n### Star History\n\n[![Star History Chart](https://api.star-history.com/svg?repos=crashmax-dev/fireworks-js\u0026type=Date)](https://star-history.com/#crashmax-dev/fireworks-js\u0026Date)\n\n### Author\n- [crashmax](https://github.com/crashmax-dev)\n\n### License\n- [MIT](https://github.com/crashmax-dev/fireworks-js/blob/master/LICENSE)\n","funding_links":[],"categories":["TypeScript","📂 按分类"],"sub_categories":["🎆 视觉效果"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrashmax-dev%2Ffireworks-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcrashmax-dev%2Ffireworks-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcrashmax-dev%2Ffireworks-js/lists"}