https://github.com/9am/fire-flame
A fire flame library 🔥
https://github.com/9am/fire-flame
animation canvas fire flame particles react svg webcomponents
Last synced: about 2 months ago
JSON representation
A fire flame library 🔥
- Host: GitHub
- URL: https://github.com/9am/fire-flame
- Owner: 9am
- License: mit
- Created: 2022-08-11T07:08:05.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-18T04:31:55.000Z (almost 4 years ago)
- Last Synced: 2025-06-09T12:02:47.988Z (about 1 year ago)
- Topics: animation, canvas, fire, flame, particles, react, svg, webcomponents
- Language: TypeScript
- Homepage:
- Size: 146 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
---
## Demo
https://user-images.githubusercontent.com/1435457/181478598-803a9822-247f-44e2-8643-3de775900153.mov
## Packages
| Package | Status | Description | Installation | Live Demo |
| ------- | ------ | ----------- | ------------ | --------- |
| [@9am/fire-flame](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame) | [](https://npm.im/@9am/fire-flame) | Vanilla JS | `npm install @9am/fire-flame` | [](https://codesandbox.io/s/fire-flame-gfdw6f?fontsize=14&hidenavigation=1&theme=dark) |
| [@9am/fire-flame-element](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame-element) | [](https://npm.im/@9am/fire-flame-element) | Web Component | `npm install @9am/fire-flame-element ` | [](https://codesandbox.io/s/fire-flame-element-4np4yg?fontsize=14&hidenavigation=1&theme=dark) |
| [@9am/fire-flame-react](https://github.com/9am/fire-flame/tree/main/packages/%409am/fire-flame-react) | [](https://npm.im/@9am/fire-flame-react) | React Component | `npm install @9am/fire-flame-react` | [](https://codesandbox.io/s/fire-flame-react-gptfe4?fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.tsx&theme=dark) |
## Usage
#### [`@9am/fire-flame`](https://github.com/@9am/fire-flame)
```js
import { FireFlame } from '@9am/fire-flame';
const ff = new FireFlame(document.querySelector('#container'), { /* option */ });
```
#### [`@9am/fire-flame-element`](https://github.com/@9am/fire-flame)
```js
import '@9am/fire-flame-element';
// HTML
```
#### [`@9am/fire-flame-react`](https://github.com/@9am/fire-flame)
```js
import { FireFlame } from '@9am/fire-flame-react';
// JSX
```
## Documentation
### Option
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
|**`painter`**|'canvas' \| 'svg'|`'canvas'`|the renderer for fire flame|
|**`w`**|number|`400`|width|
|**`h`**|number|`400`|height|
|**`x`**|number|`0`|position x|
|**`y`**|number|`0`|position y|
|**`mousemove`**|boolean|`true`|enable mousemove|
|**`fps`**|number|`60`|render fps|
|**`wind`**|Vector|`new Vector({ x: 0, y: -0.8 })`|the Vector force applied to particles|
|**`friction`**|number|`0.98`|the friction applied to particles|
|**`particleNum`**|number|`15`|the number of particle to draw the flame|
|**`particleDistance`**|number|`10`|the distance between particles|
|**`particleFPS`**|number|`10`|particle spawn fps|
|**`sizeCurveFn`**|function|
() => x > 0.7
? Math.sqrt(1 - x) * 50
: Math.pow(x - 1, 2) * -30 + 30
|define the size of the flame|
|**`innerColor`**|string|`'blue'`|flame color inner|
|**`outerColor`**|string|`'blueviolet'`|flame color outer|
### API
#### `.start()`
Start fire flame.
#### `.stop()`
Stop fire flame.
#### `.setOption(option)`
Update fire flame options.
#### `.destroy()`
Destroy fire flame.
## License
[MIT](LICENSE)
