ipad-cursor-js

An iPadOS based cursor for the browser

npm

npm install ipad-cursor-js

<body>
  ...stuff
  <script
    type="text/javascript"
    src="node_modules/ipad-cursor-js"
  ></script>
</body>

CDN

<body>
  ...stuff
  <script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/ipad-cursor-js@latest/index.js"
  ></script>
</body>

Creating the cursor

Nothing needs to be done to create a cursor, it is attached to the DOM automatically.

However to customise the cursor, you can add a <div> with id cursor to the root of your page.

e.g.

<div id="cursor" data-w="30px" data-h="30px" data-bg="white"></div>

data-w - Set the width for the general cursor default: 10px

data-h - Set the height for the general cursor default: 10px

data-bg - Set the background for the cursor default: gray

Cursors

The text cursor activates when hovering over any of the following elements: p,span,h1,h2,h3,h4,textarea,input

Only text based inputs e.g. <input type="email"/>

Set the data-cursor attribute to any element on the page to enable the fill or drag cursor

<button data-cursor="fill">Click me!</button>

<button data-cursor="drag">Click me!</button>

Set data-cursor="reset" to revert to a normal cursor for that element.

Doesn't add mouseenter and mouseleave event listeners to every desireable element, this also means that a MutationObserver is not required to detect new elements added to the page and applying the necessary event listeners to them. Instead, a single mousemove event listener is added to the document and we find out what's underneath the cursor with document.elementFromPoint

Provide feedback