{"id":19184499,"url":"https://github.com/9am/fire-flame","last_synced_at":"2026-05-08T00:38:43.730Z","repository":{"id":57750130,"uuid":"523620667","full_name":"9am/fire-flame","owner":"9am","description":"A fire flame library 🔥","archived":false,"fork":false,"pushed_at":"2022-08-18T04:31:55.000Z","size":150,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-09T12:02:47.988Z","etag":null,"topics":["animation","canvas","fire","flame","particles","react","svg","webcomponents"],"latest_commit_sha":null,"homepage":"","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/9am.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}},"created_at":"2022-08-11T07:08:05.000Z","updated_at":"2023-03-31T06:10:35.000Z","dependencies_parsed_at":"2022-08-26T08:31:35.556Z","dependency_job_id":null,"html_url":"https://github.com/9am/fire-flame","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/9am/fire-flame","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Ffire-flame","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Ffire-flame/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Ffire-flame/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Ffire-flame/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9am","download_url":"https://codeload.github.com/9am/fire-flame/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9am%2Ffire-flame/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260933186,"owners_count":23084949,"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":["animation","canvas","fire","flame","particles","react","svg","webcomponents"],"created_at":"2024-11-09T11:07:22.765Z","updated_at":"2026-05-08T00:38:38.702Z","avatar_url":"https://github.com/9am.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/1435457/184616572-df451c3a-737c-4e44-84cb-f3348189d7bb.gif\" alt=\"fire-flame\" width=\"180\" height=\"180\" /\u003e\n    \u003cp\u003eA fire flame library 🔥 \u003ca href=\"https://github.com/9am/9am.github.io/issues/7\"\u003eLight a 'Fire' with Canvas and Particles\u003c/a\u003e\u003c/p\u003e\n    \u003cp\u003e\n        \u003ca href=\"https://github.com/9am/fire-flame/blob/main/LICENSE\"\u003e\n            \u003cimg alt=\"GitHub\" src=\"https://img.shields.io/github/license/9am/fire-flame?style=flat-square\u0026color=success\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@9am/fire-flame\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/@9am/fire-flame?style=flat-square\u0026color=orange\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://www.npmjs.com/package/@9am/fire-flame\"\u003e\n            \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/dt/@9am/fire-flame?style=flat-square\u0026color=blue\"\u003e\n        \u003c/a\u003e\n        \u003ca href=\"https://bundlephobia.com/package/@9am/fire-flame@latest\"\u003e\n            \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/@9am/fire-flame?style=flat-square\"\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n## Demo\nhttps://user-images.githubusercontent.com/1435457/181478598-803a9822-247f-44e2-8643-3de775900153.mov\n\n## Packages\n| Package | Status | Description | Installation | Live Demo |\n| ------- | ------ | ----------- | ------------ | --------- |\n| [@9am/fire-flame](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame) | [![](https://img.shields.io/npm/v/@9am/fire-flame?style=flat-square)](https://npm.im/@9am/fire-flame) | Vanilla JS | `npm install @9am/fire-flame` |  [![Edit fire-flame](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fire-flame-gfdw6f?fontsize=14\u0026hidenavigation=1\u0026theme=dark) |\n| [@9am/fire-flame-element](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame-element) | [![](https://img.shields.io/npm/v/@9am/fire-flame-element?style=flat-square)](https://npm.im/@9am/fire-flame-element) | Web Component | `npm install @9am/fire-flame-element ` | [![Edit fire-flame-element](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fire-flame-element-4np4yg?fontsize=14\u0026hidenavigation=1\u0026theme=dark) |\n| [@9am/fire-flame-react](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame-react) | [![](https://img.shields.io/npm/v/@9am/fire-flame-react?style=flat-square)](https://npm.im/@9am/fire-flame-react) | React Component | `npm install @9am/fire-flame-react` | [![Edit fire-flame-react](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/fire-flame-react-gptfe4?fontsize=14\u0026hidenavigation=1\u0026module=%2Fsrc%2FApp.tsx\u0026theme=dark) |\n\n\n## Usage\n\n#### [`@9am/fire-flame`](https://github.com/@9am/fire-flame)\n```js\nimport { FireFlame } from '@9am/fire-flame';\n\nconst ff = new FireFlame(document.querySelector('#container'), { /* option */ });\n```\n\n#### [`@9am/fire-flame-element`](https://github.com/@9am/fire-flame)\n```js\nimport '@9am/fire-flame-element';\n\n// HTML\n\u003cfire-flame option='/* JSON.stringify(option) */'\u003e\u003c/fire-flame\u003e\n```\n\n#### [`@9am/fire-flame-react`](https://github.com/@9am/fire-flame)\n```js\nimport { FireFlame } from '@9am/fire-flame-react';\n\n// JSX\n\u003cFireFlame option={/* option */}\u003e\u003c/FireFlame\u003e\n```\n\n## Documentation\n\n### Option\n\n| Name | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n|**`painter`**|'canvas' \\| 'svg'|`'canvas'`|the renderer for fire flame|\n|**`w`**|number|`400`|width|\n|**`h`**|number|`400`|height|\n|**`x`**|number|`0`|position x|\n|**`y`**|number|`0`|position y|\n|**`mousemove`**|boolean|`true`|enable mousemove|\n|**`fps`**|number|`60`|render fps|\n|**`wind`**|Vector|`new Vector({ x: 0, y: -0.8 })`|the Vector force applied to particles|\n|**`friction`**|number|`0.98`|the friction applied to particles|\n|**`particleNum`**|number|`15`|the number of particle to draw the flame|\n|**`particleDistance`**|number|`10`|the distance between particles|\n|**`particleFPS`**|number|`10`|particle spawn fps|\n|**`sizeCurveFn`**|function|\u003cpre\u003e() =\u003e x \u003e 0.7 \u003cbr/\u003e   ? Math.sqrt(1 - x) * 50\u003cbr/\u003e   : Math.pow(x - 1, 2) * -30 + 30\u003c/pre\u003e|define the size of the flame|\n|**`innerColor`**|string|`'blue'`|flame color inner|\n|**`outerColor`**|string|`'blueviolet'`|flame color outer|\n\n### API\n\n#### `.start()`\nStart fire flame.\n\n#### `.stop()`\nStop fire flame.\n\n#### `.setOption(option)`\nUpdate fire flame options.\n\n#### `.destroy()`\nDestroy fire flame.\n\n\n## License\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Ffire-flame","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9am%2Ffire-flame","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9am%2Ffire-flame/lists"}