57 lines
1.3 KiB
Plaintext
57 lines
1.3 KiB
Plaintext
---
|
|
---
|
|
|
|
<div class="wi-cursor-glow" id="wi-cursor-glow"></div>
|
|
|
|
<script is:inline>
|
|
(function(){
|
|
var glowEl = document.getElementById("wi-cursor-glow");
|
|
if (!glowEl) return;
|
|
var rafId = 0;
|
|
document.addEventListener("mousemove", function(e) {
|
|
if (rafId) return;
|
|
rafId = requestAnimationFrame(function() {
|
|
glowEl.style.transform = "translate(calc(" + e.clientX + "px - 50%), calc(" + e.clientY + "px - 50%))";
|
|
glowEl.classList.add("wi-cursor-glow--visible");
|
|
rafId = 0;
|
|
});
|
|
}, { passive: true });
|
|
document.addEventListener("mouseleave", function() {
|
|
glowEl.classList.remove("wi-cursor-glow--visible");
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.wi-cursor-glow {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 400px;
|
|
height: 400px;
|
|
border-radius: 50%;
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(212, 118, 78, 0.06) 0%,
|
|
transparent 70%
|
|
);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
.wi-cursor-glow--visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
html.dark .wi-cursor-glow {
|
|
background: radial-gradient(
|
|
circle,
|
|
rgba(232, 149, 95, 0.04) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
</style>
|