JSFiddle - React, Tailwind, and code Playground

by 20yco

HTML

<div class="cursor cursor-a" style="left: 335px; top: 518px;"></div>
<div class="cursor cursor-b" style="left: 792px; top: 524px;">
      <div class="cursor-v"></div>     
 </div>
 
 <div class="cont">
   <a class="link" href="#">custom link, hover me!</a>
 </div>

CSS

* {
    cursor: none;
}

body {
  background: #000;
}

.cont {
  padding: 40px;
}
.link {
  color:#fff;
  text-decoration:none;
  display:block;
  padding-top:20px;
}

.cursor {
    position: fixed;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    z-index: 1000;
}


.cursor {
  position: fixed;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  z-index: 1000;
  
}
  
.cursor-a  {
        position: fixed;
        background-color: #5C6AFF;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        z-index: 10000;
        transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
        user-select: none;
        pointer-events: none;
        z-index: 100000000;
        transform: scale(1);
    }

.cursor-a.active {
        opacity: 0.5;
        transform: scale(0);
    }
.cursor-b {
    position: fixed;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    user-select: none;
    pointer-events: none;
    z-index: 10000000;
    transform: translate(-14px, -14px);
}

.cursor-v {
    width: 38px;
    transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    height: 38px;
    border-radius: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: white;
}

    .cursor-v.active {
	    background-color: rgba(255, 255, 255, 0.1);
        opacity: 0.7;
        transform: scale(2);
        border:none;
    }

JavaScript

$(document)
  .mousemove(function(e) {
    $('.cursor')
      .eq(0)
      .css({
        left: e.clientX,
        top: e.clientY
      });
    setTimeout(function() {
      $('.cursor')
        .eq(1)
        .css({
          left: e.clientX,
          top: e.clientY
        });
    }, 100);
  })
 
$("a").on("mouseenter", function () {
      $('.cursor-a').addClass("active");
      $('.cursor-v').addClass("active");
    });
    $("a").on("mouseleave", function () {
      $('.cursor-a').removeClass("active");
       $('.cursor-v').removeClass("active");
    });