Cursorx NPM | npm.io

CursorX Project

A tool that allows you to easily transform your ordinary cursor into something extraordinary.

Preview CursorX-type1

CursorX-type1-preview

Preview CursorX-type2

CursorX-type2-preview

Preview CursorX-type3

CursorX-type3-preview

Preview CursorX-pic

CursorX-pic-preview

Preview CursorX-minecraftSword

CursorX-minecraftSword-preview

Preview CursorX-apple

CursorX-apple-preview

Installation

To use CursorX >

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cursorx@0.0.6/cursorx.css">

Copy and paste this link on your html head tag.

And >

<script src="https://cdn.jsdelivr.net/npm/cursorx@0.0.6/cursorx.js"></script>

Copy and paste this to your body tag at the end.

Installation Done, Now to implement cursor effect >

<!-- CursorX-type1 -->
<div class="CursorX-dot-type1" data-cursor-dot></div>
<div class="CursorX-outline-type1" data-cursor-outline></div>

Just copy and paste it to anywhere of your body tag.
This one is type1, To use type2 simply Change type1 to type2 >

<!-- CursorX-type2 -->
<div class="CursorX-dot-type2" data-cursor-dot></div>
<div class="CursorX-outline-type2" data-cursor-outline></div>

More CursorX Types are given below >

CursorX-type3

<!-- CursorX-type3 -->
<div class="CursorX-dot-type3" data-cursor-dot></div>
<div class="CursorX-outline-type3" data-cursor-outline></div>

CursorX-pic

Use your random pic or gif as cursor.
Just replace your_pic.png to your actual photo, Like abcd.png or abcd.jpg or abcd.gif

<!-- CursorX-pic -->
<div class="CursorX-dot-pic" data-cursor-dot></div>
<img src="your_pic.png" alt="Cursor Image" 
  class="CursorX-outline-pic" data-cursor-outline>

CursorX-minecraftSword

<!-- CursorX-minecraftSword -->
<div class="CursorX-dot-minecraftSword" data-cursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/CursorX/minecraft-sword.png?updatedAt=1700926782092" alt="Cursor Image" 
  class="CursorX-outline-minecraftSword" data-cursor-outline>

CursorX-apple

<!-- CursorX-apple -->
<div class="CursorX-dot-apple" data-cursor-dot></div>
<img src="https://ik.imagekit.io/iamovi/CursorX/apple.png?updatedAt=1700931158158" alt="Cursor Image" 
  class="CursorX-outline-apple" data-cursor-outline>

Check CursorX-types.txt file.

To show default Cursor >

Preview of Get default cursor

html, button, a {
  cursor: auto !important;
}

Add this on your .css file.

Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Document</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cursorx@0.0.6/cursorx.css">    
    <style>
      button {
          background-color: aquamarine;
          cursor: pointer;
          display: block;
          border: 1px solid black;
          margin: auto;
          margin-top: 150px;
          padding: 10px;
      }
      button:hover {
        border-radius: 10px;
      }
  </style>
  </head>
  <body>

    <!-- CursorX-type1 -->
    <div class="CursorX-dot-type1" data-cursor-dot></div>
    <div class="CursorX-outline-type1" data-cursor-outline></div>

    <!-- CursorX-type2 -->
    <!-- <div class="CursorX-dot-type2" data-cursor-dot></div>
    <div class="CursorX-outline-type2" data-cursor-outline></div> -->

    <!-- CursorX-type3 -->
    <!-- <div class="CursorX-dot-type3" data-cursor-dot></div>
    <div class="CursorX-outline-type3" data-cursor-outline></div> -->

    <!-- CursorX-pic -->
    <!-- <div class="CursorX-dot-pic" data-cursor-dot></div>
    <img src="your_pic.jpg" alt="Cursor Image" 
      class="CursorX-outline-pic" data-cursor-outline> -->    

    <!-- CursorX-minecraftSword -->
    <!-- <div class="CursorX-dot-minecraftSword" data-cursor-dot></div>
    <img src="https://ik.imagekit.io/iamovi/CursorX/minecraft-sword.png?updatedAt=1700926782092" alt="Cursor Image" 
    class="CursorX-outline-minecraftSword" data-cursor-outline> -->     

    <!-- CursorX-apple -->
    <!-- <div class="CursorX-dot-apple" data-cursor-dot></div>
    <img src="https://ik.imagekit.io/iamovi/CursorX/apple.png?updatedAt=1700931158158" alt="Cursor Image" 
    class="CursorX-outline-apple" data-cursor-outline> -->       

    <button>Test ME!</button>
    
    <script src="https://cdn.jsdelivr.net/npm/cursorx@0.0.6/cursorx.js"></script>
  </body>
</html>