<!DOCTYPE html>
<style>
body {
min-width: 100vw;
min-height: 100vh;
cursor: none;
margin: 0;
}
h1 {
margin: 0;
}
#cursor {
position: fixed;
/* Desactivado porque lagea todo: transition: all 0.1s; */
pointer-events: none;
font-size: 3rem;
}
</style>
<h1>hola mundo</h1>
<span id="cursor">❥</span>
<script>
const cursorEl = document.querySelector("#cursor");
document.body.addEventListener("mousemove", (event) => {
cursorEl.style.top = `${event.clientY - cursorEl.clientHeight / 2}px`;
cursorEl.style.left = `${event.clientX - cursorEl.clientWidth / 2}px`;
});
</script>