Author: | trananhtuat |
---|---|
Views Total: | 348 views |
Official Page: | Go to website |
Last Update: | August 10, 2022 |
License: | MIT |
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' })