v.1.1.0

Author: Drafteed

README.MD

@@ -1,10 +1,10 @@
 # Cuberto Mouse Follower
 
-<a href="https://www.npmjs.com/package/mouse-follower"><img src="https://img.shields.io/npm/v/mouse-follower" alt="NPM Version"></a>
-<a href="LICENCE"><img src="https://img.shields.io/github/license/Cuberto/mouse-follower" alt="Licence"></a>
-<img src="https://img.shields.io/bundlephobia/min/mouse-follower?color=orange" alt="Bundle file size">
-<img src="https://img.shields.io/bundlephobia/minzip/mouse-follower?color=orange&label=gzip%20size" alt="Bundle file size (gzip)">
-<a href="https://npmcharts.com/compare/mouse-follower?minimal=true"><img src="https://img.shields.io/npm/dm/mouse-follower" alt="NPM Downloads"></a>
+<a href="https://www.npmjs.com/package/mouse-follower"><img src="https://img.shields.io/npm/v/mouse-follower?color=red" alt="NPM Version"></a>
+<a href="LICENCE"><img src="https://img.shields.io/github/license/Cuberto/mouse-follower?color=orange" alt="Licence"></a>
+<img src="https://img.shields.io/bundlephobia/min/mouse-follower?color=green" alt="Bundle file size">
+<img src="https://img.shields.io/bundlephobia/minzip/mouse-follower?color=yellow&label=gzip%20size" alt="Bundle file size (gzip)">
+<a href="https://npmcharts.com/compare/mouse-follower?minimal=true"><img src="https://img.shields.io/npm/dm/mouse-follower?color=blue" alt="NPM Downloads"></a>
 <img src="https://img.shields.io/github/workflow/status/Cuberto/mouse-follower/Build" alt="GitHub Workflow Status">
 
 A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.
@@ -15,37 +15,59 @@ A powerful javascript library to create amazing and smooth effects for the mouse
 
 GSAP v3 (https://greensock.com/gsap/)
 
-## Installation
+## Quick start
+
+### Install from NPM
+
+Mouse Follower requires GSAP library to work.
 
 ```
 npm install gsap --save
 npm install mouse-follower --save
 ```
 
-## Quick start
+Import GSAP and Mouse Follower and initialize it:
 
-Import cursor styles from `/src/scss/index.scss` into your main SCSS file:
+```js
+import MouseFollower from "mouse-follower";
+import gsap from "gsap";
+
+MouseFollower.registerGSAP(gsap);
+
+const cursor = new MouseFollower();
+```
+
+Don't forget to import the cursor styles from `/src/scss/index.scss` into your main scss file:
 
 ```scss
 @import "cursor";
 ```
 
-Mouse Follower requires GSAP library to work.
+### Use from CDN
 
-Import GSAP, import Mouse Follower and initialize it in JS:
+If you don't want to include Mouse Follower files in your project, you can use it from CDN.
 
-```js
-import MouseFollower from "mouse-follower";
-import gsap from "gsap";
+The following files are available:
 
-MouseFollower.registerGSAP(gsap);
+```html
+<link rel="stylesheet" href="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.css">
 
-const cursor = new MouseFollower();
+<script src="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.js"></script>
+```
+
+Mouse Follower requires GSAP library to work. You need to import it before the Mouse Follower if you didn't have it before:
+
+```html
+<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+<script src="https://unpkg.com/mouse-follower@1/dist/mouse-follower.min.js"></script>
+<script>
+    var cursor = new MouseFollower();
+</script>
 ```
 
-### Options
+## Options
 
-You can configure cursor follower via options:
+You can configure Mouse Follower via options:
 
 ```js
 const cursor = new MouseFollower({

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mouse-follower",
-	"version": "1.0.8",
+	"version": "1.1.0",
 	"description": "A powerful javascript library to create amazing and smooth effects for the mouse cursor on your website.",
 	"license": "MIT",
 	"source": "./src/index.js",

src/index.js

@@ -2,7 +2,7 @@
  * Cuberto Mouse Follower
  * https://cuberto.com/
  *
- * @version 1.0.8
+ * @version 1.1.0
  * @author Cuberto, Artem Dordzhiev (Draft)
  */
 
@@ -36,7 +36,7 @@ export default class MouseFollower {
      * @param {string} options.iconState Icon state name.
      * @param {string|null} options.activeState Active (mousedown) state name. Set false to disable.
      * @param {string} options.mediaState Media (image/video) state name.
-     * @param {object} options.stateDetelction State detection rules.
+     * @param {object} options.stateDetection State detection rules.
      * @param {boolean} options.visible Is cursor visible by default.
      * @param {boolean} options.visibleOnState Automatically show/hide cursor when state added.
      * @param {number} options.speed Cursor movement speed.