Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 7 days 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 (over 2 years ago)
Default Branch: main
Last Pushed: 2022-08-18T04:31:55.000Z (about 2 years ago)
Last Synced: 2024-10-15T09:32:46.329Z (about 1 month 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

        


    

    A fire flame library 🔥 Light a 'Fire' with Canvas and Particles

    

        

            

        

        

            

        

        

            

        

        

            

        

    



---

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

```

#### [`@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)