https://github.com/guillaume-rygn/ms-cursor
🖱️🐁 Modern and Simple cursor design
https://github.com/guillaume-rygn/ms-cursor
animation css cursor mouse
Last synced: 11 months ago
JSON representation
🖱️🐁 Modern and Simple cursor design
- Host: GitHub
- URL: https://github.com/guillaume-rygn/ms-cursor
- Owner: guillaume-rygn
- License: other
- Created: 2023-01-04T01:28:42.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T13:29:52.000Z (over 3 years ago)
- Last Synced: 2025-07-27T12:47:49.866Z (11 months ago)
- Topics: animation, css, cursor, mouse
- Language: JavaScript
- Homepage: https://ms-cursor-demo.vercel.app/
- Size: 129 KB
- Stars: 17
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Ms-cursor 🖱️🪄
[](https://github.com/guillaume-rygn/MS-Cursor/releases)
## ***It has never been so easy to have a modern mouse design !***
## Demo : https://ms-cursor-demo.vercel.app/
## Installation
Install with npm:
```shell
npm i ms-cursor
```
or install with yarn:
```shell
yarn add ms-cursor
```
## Initialize:
Add JS script:
with yarn or npm :
```HTML
```
with CDN :
```HTML
```
In HEAD of index.html file:
```HTML
```
Or initialize with CDN in HEAD of index.html file:
```HTML
```
## 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.
```HTML
```
### Pause Animation
When the mouse movement stops an animation is triggered. Have this attribute you can disable it.
```HTML
```
### Difference
This inverse effect corresponds to the CSS property:
```CSS
mix-blend-mode: difference
```
The colors of the mouse animation when hovering over an element.
```HTML
```
### Cursor
By default the cursor remains visible except when the mouse stops. You can completely disable the cursor with this attribute.
```HTML
```
### Color
You can change the color of mouse effect.
```HTML
```
### Circle-Outline
When the mouse stops, an animation starts and a border appears. You can disable it with this attribute.
```HTML
```
### 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**
```HTML
```
### 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.
```HTML
```
## Founder
| [Guillaume Reygner](https://twitter.com/guillaume_rygn) |
| ----------- |
| MS-Cursor Creator |
## License
MS Cursor is licensed under the [Hippocratic License](LICENSE.md).
## Code of conduct
This project and everyone participating in it is governed by the MS Cursor [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.