Reveal Text On Hover Using A Cutom Cursor

Preview:

Description:

A text reveal spotlight effect that enables a custom blob cursor to reveal any text hidden behind the page.

How to use it:

1. Make your text the same color as the background.

<div class="content__text">
  <h1 class="title">
    CSSScript.Com
  </h1>
</div>

body {
  background-color: #222;
}
.content__text {
  color: #222;
}

2. Create a custom blob on the page.

<div class="cursor" id="cursor"></div>

.cursor {
  height: 300px;
  width: 300px;
  background-color: rgba(165, 165, 165, 50%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  position: absolute;
  z-index: -1;
}

3. Enable the text reveal on hover effect.

const cursor = document.querySelector('#cursor')
window.addEventListener('mousemove', (e) => {
  cursor.style.left = (e.x - 150) + 'px'
  cursor.style.top = (e.y - 150) + 'px'
})