Gradient Cursor Glow

<!-- Gradient Cursor Glow · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="gcg-stage"><div class="gcg-glow"></div><div class="gcg-content"><b>Neddev Studio</b><span>beweeg de muis</span></div></div>
</div>

/* Gradient Cursor Glow · NedDev · eigen werk. */
.gcg-stage{position:absolute;inset:0;overflow:hidden;background:#0a0a0a;display:flex;align-items:center;justify-content:center;font-family:'Switzer',system-ui,sans-serif}
.gcg-glow{position:absolute;inset:0;background:radial-gradient(220px circle at var(--gx,50%) var(--gy,50%),rgba(245,72,15,.55),rgba(245,72,15,0) 60%);transition:background .12s ease}
.gcg-content{position:relative;text-align:center;z-index:2}.gcg-content b{display:block;font-size:24px;color:#fff;letter-spacing:-.01em}.gcg-content span{display:block;margin-top:6px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.gcg-stage::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px}

// Gradient Cursor Glow · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.gcg-stage')||root;var glow=root.querySelector('.gcg-glow');var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;if(reduce)return;root.addEventListener('mousemove',function(e){var r=root.getBoundingClientRect();glow.style.setProperty('--gx',(e.clientX-r.left)+'px');glow.style.setProperty('--gy',(e.clientY-r.top)+'px');});
}
init(document.querySelector('.jouw-container'));