Create Smooth Custom Cursor Effects Using Cursor Magic

Cursor Magic is a lightweight JavaScript library for creating a highly customizable cursor effect that always follows the mouse pointer when you move it around the webpage.

It works by creating a new DOM element, styling it according to your preferences, and then continuously updating its position to follow the original mouse pointer.

How to use it:

1. You can either download the package directly from our website or install it using NPM:

npm install cursor-magic

2. Import the createCursorMagic module into your JavaScript or HTML file:

import { createCursorMagic } from "./dist/cursor-magic.js";

3. Call the function createCursorMagic() to initialize the default cursor effect.

createCursorMagic();

4. Customize the cursor effect:

createCursorMagic({
  // Assign a unique ID to the cursor
  cursorID: "customCursorID", 
  // Cursor size in px
  cursorSize: 50, 
  // Apply your own CSS styles to the cursor
  cursorStyle: { backgroundColor: "#222", border: "2px solid red" },
});

Changelog:

v0.6.1 (10/02/2024)

• Remove cursor click effects.

v0.6.0 (10/01/2024)

• Added the ability to enable cursor click effects from the client side.

v0.5.2 (09/30/2024)

• React components are now supported.