Interacitve Cursor Effect In Vanilla JavaScript – cursor-dot

Category: Javascript , Recommended | July 1, 2019
Views Total:7,301 views
Official Page:Go to website
Last Update:July 1, 2019


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 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'

You Might Be Interested In:

Leave a Reply