90’s Cursor Move Effects In Pure JavaScript

Preview:

Description:

This package provides eight 90’s retro cursor move effects implemented in pure JavaScript.

Cursor effects included:

1. Bubble (Demo)
2. Emoji  (Demo)
3. Fairy Dust (Demo)
4. Following Dot Cursor
5. Ghost (Demo)
6. Snowflakes (Demo)
7. Springy Emoji Cursor
8. Tailing Cursor
9. Rainbow Cursor
10. Clock Cursor
11. Text Flag

How to use it:

Download & unzip the package.

Load a cursor move effect of your choice in the document. That’s it.

<script src="js/bubbleCursor.js"></script>
<script src="js/clockCursor.js"></script>
<script src="js/emojiCursor.js"></script>
<script src="js/fairyDustCursor.js"></script>
<script src="js/followingDotCursor.js"></script>
<script src="js/ghostCursor.js"></script>
<script src="js/rainbowCursor.js"></script>
<script src="js/snowflakeCursor.js"></script>
<script src="js/springyEmojiCursor.js"></script>
<script src="js/textFlag.js"></script>
<script src="js/trailingCursor.js"></script>

It also provides a JS template that makes it easy to create your own cursor effects.

/*!
 * Cursor Name.js
 * -- 90's cursors collection
 */
(function cursorName() {
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  var cursor = {x: width/2, y: width/2};
  
  function init() {
    bindEvents();
  }
  
  // Bind events that are needed
  function bindEvents() {
    document.addEventListener('mousemove', onMouseMove);
    window.addEventListener('resize', onWindowResize);
  }
  
  function onWindowResize(e) {
    width = window.innerWidth;
    height = window.innerHeight;
  }
  
  function onMouseMove(e) {    
    cursor.x = e.clientX;
    cursor.y = e.clientY;
  }
  
  /**
   * Utils
   */
  
  // Applies css `properties` to an element.
  function applyProperties( target, properties ) {
    for( var key in properties ) {
      target.style[ key ] = properties[ key ];
    }
  }
  
  init();
})();

Changelog:

v1.0.10 (02/03/2023)

• New options to the trailing cursor for trail count and image src

v1.0.9 (01/21/2023)

• Idling performance improvements

v1.0.8 (12/31/2022)

• Add text flag cursor effect

v1.0.7 (11/16/2022)

• Fix destroy function breaking esm imports

v1.0.6 (09/26/2022)

• Fixes small bug where two cursors would not correctly init without default options

v1.0.5 (09/22/2022)

• Optional destroy function to remove cursor
• Respects prefers reduced motion

v1.0.4 (08/21/2022)

• Added Clock Cursor

07/08/2022

• Add Rainbow Cursor

07/06/2022

• spring emoji and rollup updates

04/24/2022

• a dot that simply follows the mouse

02/07/2022

• trailing cursor