---
## 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)
