I've been working on a unique project to create a website with "hidden text" elements.
One of the cool features I've developed is a circular div that follows my mouse cursor and flips all text below it using background-filter in both CSS and Javascript:
let circle = document.getElementById('circle');
const onMouseMove = (e) => {
circle.style.left = e.pageX + 'px';
circle.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', onMouseMove);
The styling for the #circle element looks like this:
#circle {
position: absolute;
transform: translate(-50%,-50%);
height: 80px;
width: 80px;
border-radius: 50%;
box-shadow: 0px 0px 40px 10px white;
pointer-events: none;
backdrop-filter: invert(100%);
z-index: 100;
}
I've attempted to adjust the text opacity to 5% and then utilize backdrop-filter: opacity(100%) but unfortunately, it didn't deliver the desired result. How should I proceed to make this work? I'm open to exploring different libraries and following tutorials. Accessibility isn't a concern right now since this is purely an experimental endeavor.