Interactive Cursor With View Text On Links Hover

Are you ready to add a little fun to your Bricks website? Here is the vanilla JS code snippet for interactive cursor. If you want to apply across the website globally, add this code in bricks > setting > custom code.

Here is the example picture when hover over on the lightbox link.

<style>
  /* Define the styles for the custom cursor */
  .custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(252, 78, 3, 0.80);
    pointer-events: none;
    z-index: 9999;
    transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease; /* Add width and height transition */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px; /* Set the initial font size for the link text */
  }

</style>

<script>
  // Create the custom cursor element
  var customCursor = document.createElement('div');
  customCursor.className = 'custom-cursor';
  document.body.appendChild(customCursor);

  // Update the cursor position
  function updateCursorPosition(event) {
    var x = event.clientX;
    var y = event.clientY;
    customCursor.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  }

  // Show link text inside cursor on link hover
  var links = document.querySelectorAll('a');

  links.forEach(function(link) {
    link.addEventListener('mouseenter', function() {
      var linkText = "VIEW";
      customCursor.textContent = linkText;
    });

    link.addEventListener('mouseleave', function() {
      customCursor.textContent = '';
      link.style.fontSize = ''; // Reset the font size for the link
    });
  });

  // Add event listeners to track mouse movement
  document.addEventListener('mousemove', updateCursorPosition);
  document.addEventListener('mouseenter', function() {
    customCursor.style.opacity = 1;
  });
  document.addEventListener('mouseleave', function() {
    customCursor.style.opacity = 0;
  });
</script>