# @9am/fire-flame-element

> A fire flame library.

Latest version **0.3.2** (published 2022-08-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @9am/fire-flame-element
pnpm add @9am/fire-flame-element
yarn add @9am/fire-flame-element
bun add @9am/fire-flame-element
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.2 |
| Published | 2022-08-18 |
| First published | 2022-08-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | 9am |
| Keywords | fire, flame, animation, canvas, svg, web-component |

## Links

- npm: https://www.npmjs.com/package/@9am/fire-flame-element
- Repository: https://github.com/9am/fire-flame
- Homepage: https://github.com/9am/fire-flame#readme
- Issues: https://github.com/9am/fire-flame/issues
- npm.io page: https://npm.io/package/@9am/fire-flame-element

## Dependencies (1)

- [@9am/fire-flame](https://npm.io/package/@9am/fire-flame.md) 0.3.2

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.3.2 (latest) — 2022-08-18
- 0.3.1 — 2022-08-18
- 0.3.0 — 2022-08-18
- 0.2.1 — 2022-08-16
- 0.2.0 — 2022-08-16
- 0.1.0 — 2022-08-15
- 0.0.0 — 2022-08-15

## README

<div align="center">
    <img src="https://user-images.githubusercontent.com/1435457/184616572-df451c3a-737c-4e44-84cb-f3348189d7bb.gif" alt="fire-flame" width="180" height="180" />
    <p>A fire flame library 🔥 <a href="https://github.com/9am/9am.github.io/issues/7">Light a 'Fire' with Canvas and Particles</a></p>
    <p>
        <a href="https://github.com/9am/fire-flame/blob/main/packages/%409am/fire-flame-element/README.md">
            <img alt="GitHub" src="https://img.shields.io/github/license/9am/fire-flame?style=flat-square&color=success">
        </a>
        <a href="https://www.npmjs.com/package/@9am/fire-flame-element">
            <img alt="npm" src="https://img.shields.io/npm/v/@9am/fire-flame-element?style=flat-square&color=orange">
        </a>
        <a href="https://www.npmjs.com/package/@9am/fire-flame-element">
            <img alt="npm" src="https://img.shields.io/npm/dt/@9am/fire-flame-element?style=flat-square&color=blue">
        </a>
        <a href="https://bundlephobia.com/package/@9am/fire-flame-element@latest">
            <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@9am/fire-flame-element?style=flat-square">
        </a>
    </p>
</div>

---

## 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://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&hidenavigation=1&theme=dark) |
| [@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&hidenavigation=1&theme=dark) |
| [@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&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
<fire-flame option='/* JSON.stringify(option) */'></fire-flame>
```

#### [`@9am/fire-flame-react`](https://github.com/@9am/fire-flame)
```js
import { FireFlame } from '@9am/fire-flame-react';

// JSX
<FireFlame option={/* option */}></FireFlame>
```

## 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|<pre>() => x > 0.7 <br/>   ? Math.sqrt(1 - x) * 50<br/>   : Math.pow(x - 1, 2) * -30 + 30</pre>|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)

---
_Source: https://npm.io/package/@9am/fire-flame-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._