matozz / cursorjs

This experimental library help you to add iPad OS like dynamic cursor to webpages.

Cursor.js

iPadOS provides dynamic pointer effects and behaviors that enhance the experience of using a pointing device with iPad. This experimental library help you to achieve this amazing effect.

Design - Pointers (iPadOS)

Demo Page (Download the Source File)

How to use

1. Use <script> tag to load Cursor.js in your HTML file：

• UNPKG CDN:

<script src="//unpkg.com/@matoz/cursorjs" defer></script>

• jsDelivr CDN:

<script src="//cdn.jsdelivr.net/npm/@matoz/cursorjs" defer></script>

2. Follow the exmaples below.

Supported Effect:

Highlight effect:

<button>
  <img src="./assets/airplay.svg" style="margin-right: 6px" />
  Airplay
</button>
<button>Material</button>
<button>Cursor</button>
<button>😂</button>
<button>😊</button>

This experimental version will only work with the default internal button style, we will make the button customizable in future release.

Lift effect:

<img class="icon" id="icon" src="./assets/Message.svg" alt="Message" />
<img class="icon" id="icon" src="./assets/Phone.svg" alt="Phone" />

Simply add id="icon" attribute to <img> tag

Content effect:

<p>
  With a content effect, the UI element or region beneath the pointer can
  also change its appearance when the pointer hovers over it.
</p>

Since there is no way to get each line of text, you need to manually set each line.

More effects...

Contribute

Feel free to fork this repository and submit pull requests. Bugs report in GitHub Issues.

License

Cursor.js is MIT Licensed.