@9am/fire-flame - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
   "name": "@9am/fire-flame",
-  "version": "0.1.0",
-  "description": "",
+  "version": "0.2.0",
+  "description": "A fire flame library.",
   "keywords": [
@@ -6,0 +6,0 @@ "fire",

README.md

 <div align="center">
-	<img src="https://user-images.githubusercontent.com/1435457/184616572-df451c3a-737c-4e44-84cb-f3348189d7bb.gif" alt="img-tissue" width="180" height="180" />
-	<h1>A fire flame library 🔥</h1>
+    <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/LICENSE">
+            <img alt="GitHub" src="https://img.shields.io/github/license/9am/fire-flame?color=success">
+        </a>
+        <a href="https://www.npmjs.com/package/@9am/fire-flame">
+            <img alt="npm" src="https://img.shields.io/npm/v/@9am/fire-flame?color=orange">
+        </a>
+        <a href="https://www.npmjs.com/package/@9am/fire-flame">
+            <img alt="npm" src="https://img.shields.io/npm/dt/@9am/fire-flame?color=blue">
+        </a>
+        <a href="https://bundlephobia.com/package/@9am/fire-flame@latest">
+            <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@9am/fire-flame">
+        </a>
+    </p>
 </div>
 
-<p align="center">
-  <a href="https://github.com/@9am/fire-flame/blob/main/LICENSE">
-    <img alt="GitHub" src="https://img.shields.io/github/license/@9am/fire-flame?color=success">
-  </a>
-  <a href="https://www.npmjs.com/package/@9am/fire-flame">
-    <img alt="npm" src="https://img.shields.io/npm/v/@9am/fire-flame?color=orange">
-  </a>
-  <a href="https://www.npmjs.com/package/fireworks-js">
-    <img alt="npm" src="https://img.shields.io/npm/dt/@9am/fire-flame?color=blue">
-  </a>
-  <a href="https://bundlephobia.com/package/@9am/fire-flame@latest">
-    <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/@9am/fire-flame">
-  </a>
-</p>
-
 ---
@@ -26,8 +25,8 @@
 
-## Installation
-| Package | Status | Description | Installation |
-| ------- | ------ | ----------- | ------------ |
-| [@9am/fire-flame](https://github.com/@9am/fire-flame/tree/main/packages/fire-flame) | [![](https://img.shields.io/npm/v/@9am/fire-flame)](https://npm.im/@9am/fire-flame) | Vanilla JS | `npm install @9am/fire-flame` |
-| [@9am/fire-flame-element](https://github.com/@9am/fire-flame/tree/main/packages/fire-flame-element) | [![](https://img.shields.io/npm/v/@9am/fire-flame-element)](https://npm.im/@9am/fire-flame-element) | Web Component | `npm install @9am/fire-flame-element ` |
-| [@9am/fire-flame-react](https://github.com/@9am/fire-flame/tree/main/packages/fire-flame-react) | [![](https://img.shields.io/npm/v/@9am/fire-flame-react)](https://npm.im/@9am/fire-flame-react) | React Component | `npm install @9am/fire-flame-react` |
+## 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)](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)](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)](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) |
 
@@ -41,6 +40,3 @@
 
-const ff = new FireFlame(
-	document.querySelector('#container'),
-	{ /* option */ },
-);
+const ff = new FireFlame(document.querySelector('#container'), { /* option */ });
 ```
@@ -53,3 +49,3 @@
 // HTML
-<fire-flame option="/* option */"></fire-flame>
+<fire-flame option='/* JSON.stringify(option) */'></fire-flame>
 ```
@@ -71,16 +67,16 @@
 | ---- | ---- | ------- | ----------- |
-|`w`|number|`400`|width|
-|`h`|number|`40`|height|
-|`x`|number|`0`|position x|
-|`y`|number|`0`|position y|
-|`mousemove`|boolean|`true`|enable follow mousemove|
-|`fps`|number|`60`|render fps|
-|`wind`|Vector|`new Vector({ x: 0, y: -0.8 })`|a Vector force applied to particles|
-|`friction`|number|`0.98`|a friction applied to particles|
-|`particleNum`|number|`15`||
-|`particleDistance`|number|`10`||
-|`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>||
-|`innerColor`|string|`'blue'`||
-|`outerColor`|string|`'blueviolet'`||
+|**`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|
 
@@ -87,0 +83,0 @@ ### API

No alert changes

Improved metrics

Total package byte prevSize

26950

3.76%

Worsened metrics

Number of lines in readme file

96

-4%

No dependency changes