Ms-cursor NPM | npm.io

Ms-cursor 🖱️🪄

Demo

It has never been so easy to have a modern mouse design !

Demo : https://ms-cursor-demo.vercel.app/

Installation

Install with npm:

npm i ms-cursor

or install with yarn:

yarn add ms-cursor

Initialize:

Add JS script:

with yarn or npm :

<script src='./node_modules/ms-cursor/index.js'></script>

with CDN :

<script src='https://cdn.jsdelivr.net/npm/ms-cursor@1.2.0/index.min.js'></script>

In HEAD of index.html file:

<link rel="stylesheet" href="./node_modules/ms-cursor/style.css" />

Or initialize with CDN in HEAD of index.html file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ms-cursor@1.2.0/style.min.css"/>

How to use it

After initialize MS-Cursor you can set the cursor. You just need to pass an attribute to the script tag.

If you do not specify anything, the mouse will take the default values!

Size

you can adjust the size of the mouse drag.

<!--Default 30-->

<script
    src="./node_modules/ms-cursor/index.js"

    size="60" 
></script>

Pause Animation

When the mouse movement stops an animation is triggered. Have this attribute you can disable it.

<!--Default enable-->

<script
    src="./node_modules/ms-cursor/index.js"

    pause-animation="disable" 
></script>

Difference

This inverse effect corresponds to the CSS property:

mix-blend-mode: difference

The colors of the mouse animation when hovering over an element.

<!--Default enable-->

<script
    src="./node_modules/ms-cursor/index.js"

    difference="disable" 
></script>

Cursor

By default the cursor remains visible except when the mouse stops. You can completely disable the cursor with this attribute.

<!--Default enable-->

<script
    src="./node_modules/ms-cursor/index.js"

    cursor="disable" 
></script>

Color

You can change the color of mouse effect.

<!--Default white with difference enable and black without difference -->

<script
    src="./node_modules/ms-cursor/index.js"

    color="#ffffff" 
></script>

Circle-Outline

When the mouse stops, an animation starts and a border appears. You can disable it with this attribute.

<!--Default enable-->

<script
    src="./node_modules/ms-cursor/index.js"

    circle-outline="disable" 
></script>

Color-Outline

When the mouse stops, an animation starts and a border appears. You can change the color of the border with this attribute. This attribute not working if you disable pause-animation attribute

<!--Default same color than color attribute-->

<script
    src="./node_modules/ms-cursor/index.js"

    color-outline="#ffffff" 
></script>

Gradient

You can activate a gradient for your mouse. This attribute replaces the color attribute. You just need to pass every color separate by a comma into a string.

<!--Default none-->

<script
    src="./node_modules/ms-cursor/index.js"

    gradient="#1f005c, #48005f, #680060, #830060, #9c155f, #b22c5e, #c5415d, #d5585c, #e36e5c, #ef865e, #f89d63, #ffb56b" 
></script>