Interacitve Cursor Effect In Vanilla JavaScript – cursor-dot

cursor-dot is a vanilla JavaScript library which creates customizable, interactive cursor effects when hovering over certain elements.

How to use it:

Install and import the library.

# Yarn
$ yarn add cursor-dot
# NPM
$ npm install cursor-dot --save

import curDot from 'cursor-dot'

Initialize the cursor-dot library and you’re ready to go.

const cursor = cursorDot({
      // options here
})

Apply custom styles to the cursor effect when hovering over different elements.

cursor.over(".element-1", {
  background: "#fff"
});
cursor.over(".element-2", {
  borderColor: "rgba(255,255,255,.38)"
});
cursor.over(".element-3", {
  scale: 0.5,
  background: "#fff"
});

All default config options.

const cursor = cursorDot({
      // diameter in pixels
      diameter: 80,
      // border width
      borderWidth: 1,
      // border color
      borderColor: '#fff',
      // easing
      easing: 4,
      // background
      background: 'transparent'
      
})