<div class="invert-workspace" id="invert-area">
<!-- The custom native cursor element -->
<div class="invert-cursor" id="custom-cursor"></div>
<h1 class="massive-text">INVERTED</h1>
<div class="color-blocks">
<div class="block b-red"></div>
<div class="block b-green"></div>
<div class="block b-blue"></div>
</div>
<p class="desc-text">Move your mouse around. The CSS mix-blend-mode: difference property automatically calculates the exact inverse color of everything beneath it.</p>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #ffffff;
}
.invert-workspace {
position: relative;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
/* Hide the native browser cursor */
cursor: none;
}
.invert-cursor {
position: fixed;
top: 0;
left: 0;
width: 60px;
height: 60px;
background-color: #ffffff;
border-radius: 50%;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
/* The core magic of the inversion effect securely applied */
mix-blend-mode: difference;
will-change: left, top;
}
.massive-text {
font-size: clamp(4rem, 15vw, 12rem);
font-weight: 900;
color: #000000;
margin: 0 0 20px 0;
letter-spacing: -2px;
text-transform: uppercase;
}
.color-blocks {
display: flex;
gap: 20px;
margin-bottom: 40px;
}
.block {
width: 100px;
height: 100px;
border-radius: 20px;
}
.b-red { background: #ef4444; }
.b-green { background: #10b981; }
.b-blue { background: #3b82f6; }
.desc-text {
max-width: 500px;
text-align: center;
font-size: 1.25rem;
color: #000000;
line-height: 1.6;
font-weight: 500;
}
const cursor = document.getElementById("custom-cursor");
const area = document.getElementById("invert-area");
/* Update the physical position securely on move */
area.addEventListener("mousemove", function(e) {
cursor.style.left = e.clientX + "px";
cursor.style.top = e.clientY + "px";
});
/* Hide the cursor cleanly if the mouse leaves the window entirely */
area.addEventListener("mouseleave", function() {
cursor.style.opacity = "0";
});
area.addEventListener("mouseenter", function() {
cursor.style.opacity = "1";
});
