JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate quaerat praesentium incidunt pariatur, a enim quis natus, quas facere nesciunt quasi alias ea reprehenderit similique eligendi magni sit doloremque odio! Dolor saepe quis, perferendis minima accusamus harum dolore incidunt totam. Ratione quidem nulla, possimus officia, vel deserunt similique ullam quo a illum, asperiores cupiditate architecto at porro! Voluptates, aliquid, at. Error, consequuntur adipisci itaque a commodi inventore voluptas nemo praesentium optio similique nihil. Rem ducimus impedit sit! Placeat quaerat fugiat vero, recusandae unde quos neque aut mollitia eaque sint, magnam autem quasi, non earum nisi illum voluptatem sunt facilis ducimus, in at. Deleniti facilis impedit repellendus, eius atque architecto, aliquid numquam quo magnam veniam sed labore excepturi, ipsa, consequuntur iste amet eveniet optio dolores eligendi asperiores. Magnam laboriosam nulla facilis quod, minus nisi sint debitis eius pariatur ducimus maxime quam in repudiandae quas error minima molestias ipsa quo enim repellat suscipit nostrum consectetur! Nisi, aut nostrum sequi totam commodi illo deleniti sed nobis molestias. Aperiam magnam quia qui maxime quas perspiciatis officiis possimus id, consequatur, eligendi, reiciendis officia exercitationem asperiores incidunt! Modi debitis veritatis dignissimos ipsum temporibus nihil labore consectetur enim dicta. Ad libero, reiciendis voluptatum quod labore dolorem assumenda temporibus ut ipsam inventore accusamus recusandae, autem accusantium voluptate eaque consectetur illo? Deleniti possimus sed totam saepe perspiciatis facilis omnis non deserunt ducimus excepturi. Non quis neque quo minus ab unde fuga quasi cum, minima earum? Ipsa possimus, vitae. Neque hic animi ipsam explicabo nesciunt sit laboriosam vero quos amet repellendus atque non a repudiandae, qui. Provident magni dolorum eum ducimus sequi molestiae magnam corporis vero repellendus incidunt, deserunt...

SCSS

* {
  box-sizing: border-box;
  margin: 0;
cursor: none;
  }
  
  
  body {
    background: #fff;
    color: #212121;
    font-family: Raleway;
    font-size: 12px;
    line-height: 2;
  }
   body {
      position: relative;	
      cursor: none;
   }
  
 .cursor {
   position: fixed;
   width: 16px;
   height: 16px;
   border-radius: 100px;
   background-color: rgba(255, 195, 0, 0);
   mix-blend-mode: unset;
   pointer-events: none;
   z-index: 100000;
   transition: transform 0.15s ease-in-out, box-shadow 0.3s ease-in-out;
   box-shadow: 0px 0px 0px 4px rgba(255, 195, 0, 0.8);
}
  
  .cursor.hovered {
  	transform: scale(2.2);
    box-shadow: 0px 0px 0px 4px rgba(255, 195, 0, 0.8);
  }
  .cursor.clicked {
  	transform: scale(0.5);
    box-shadow: 0px 0px 0px 6px rgba(255, 195, 0, 0.8);
  }

::selection {
  background-color: #42B98B;
  color: #fff;
}

.inverted {
  padding: 100px;
  background: #212121;
  color: #fefefe;
}

JavaScript

$(document).ready(function(){
$("body").append("<div class='cursor'></div>");
    var cursor = $(".cursor");
    $(window).mousemove(function(e) {
        cursor.css({
            top: e.clientY - cursor.height() / 2,
            left: e.clientX - cursor.width() / 2
        });
    });
    //$(window)
        //.mouseleave(function() { cursor.css({ opacity: "0" }); })
        //.mouseenter(function() { cursor.css({ opacity: "1" }); });

      $("a, button, [class*='trigger'], [class*='see-more']")
        	.mouseenter(function() {cursor.addClass("hovered");      })
        	.mouseleave(function() {cursor.removeClass("hovered")    });

      $(window) .mousedown(function() {cursor.addClass("clicked");   })
                .mouseup(function() {cursor.removeClass("clicked");  });
  
});