Create custom mouse cursor with pure vanilla JS (4kb) and CSS (optional) with no dependency.
npm install @phucbm/cursorjs> Create custom mouse cursor with pure vanilla JS (4kb) and CSS (optional) with no dependency.






Key features:
- Cursor moving with easing (no dependencies)
- Extremely light-weight (4kb)
- One cursor - unlimited styles on hover
Demo š https://cursorjs.netlify.app
#### NPM Package
``shell`
npm i @phucbm/cursorjs
Import
`js`
import "@phucbm/cursorjs";
#### Download
š Self hosted - Download the latest release
`html
`
š CDN Hosted - jsDelivr
`html`
`js
// with default style
Cursorjs.create();
// with more options
Cursorjs.create({
id: 'my-cursor',
innerHTML: '',
hover: [
{
selectors: '.items',
className: 'my-style-class'
},
]
});
`
| Name | Type | Default | Description |
|------------------|-------------|---------------------------|------------------------------------------------------------------|
| id | string | "css-cursor- | Set ID to get instance |0.2
| speed | float | | Cursor easing speed, the smaller, the slower |document.body
| container | DOM element | | Where to append cursor HTML |""
| className | string | | Class for cursor |""
| innerHTML | string | | Inner HTML for cursor |""
| classInViewport | string | | Class when cursor is in viewport |"(hover:hover)"
| matchMedia | string | | Only init if match this media |""
| hoverPrefixClass | string | | Prefix for hover class. |[]
| hover | string | | Actions when hover on specific elements. See Hover object below. |{...}
| wrapperCSS | CSS object | | Default style for cursor wrapper (*) |{...}
| cursorCSS | CSS object | | Default style for cursor (*) |
(*) default CSS
`js`
const options = {
wrapperCSS: {
pointerEvents: 'none',
zIndex: '9999',
position: 'fixed',
top: 0,
left: 0,
},
cursorCSS: {
boxShadow: '0 0 0 2px rgba(0, 0, 0, .3)',
width: '40px',
height: '40px',
borderRadius: '50%',
transition: 'all .3s ease',
position: 'absolute',
transform: 'translate(-50%,-50%)'
}
}
| Name | Type | Default | Description |
|-----------|--------|----------|--------------------------------------------------|
| selectors | string | "" | CSS selector, multiple elements is supported |""
| className | string | | Add this class to cursor when hover on selectors |"none"
| cursor | string | | CSS cursor when hover on selectors |
`js`
// sample hover array
const options = {
hover: [
{
selectors: '.item-a, .item-b',
className: 'is-hover-on-items',
cursor: 'pointer',
},
{
selectors: '.item-c',
className: 'is-hover-on-item-c',
cursor: 'none',
}
]
}
`js
const cursor = Cursorjs.get('my-cursor');
// remove cursor from DOM
cursor.destroy();
// check new hover selectors, useful when new items are loaded via AJAX
cursor.refresh();
`
`shellRun dev server
npm run dev
Copyright (c) 2023 @phucbm