Inverter a cor do texto ao passar o mouse usando CSS e JavaScript

Para obter o efeito de foco desejado, onde o texto preto é invertido para branco enquanto mantém o aparência de um cursor preto, podemos combinar os recursos de clip-paths CSS com manipulação de eventos JavaScript.

A abordagem consiste em criar duas camadas de texto: a camada de texto primária e uma camada de texto invertida. A camada de texto invertida é posicionada atrás da camada de texto primária e tem sua cor de texto definida como branco.

Usando JavaScript, capturamos o movimento do mouse e ajustamos dinamicamente o caminho do clipe da camada de texto invertida. À medida que o mouse se move, o caminho do clipe é ajustado para revelar mais texto invertido, criando a ilusão de que o texto principal inverte sua cor.

Aqui está uma análise dos principais componentes do código:

/* Primary Text Layer */
h1 {
  color: #000;
  position: relative;
}

/* Inverted Text Layer */
h1:before {
  position: absolute;
  content: attr(data-text); /* Same text as primary layer */
  color: #fff;
  background: #000;
  clip-path: circle(0 at var(--x, -100%) var(--y, -100%)); /* Dynamic Clip-path */
}

/* Cursor */
.cursor {
  position: fixed;
  width: 40px;
  height: 40px;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -2;
}

// Event Listener for Mouse Movement
document.body.onmousemove = function(e) {
  // Update cursor position
  cursor.style.left = e.clientX   'px';
  cursor.style.top = e.clientY   'px';

  // Update clip-path of inverted layer based on mouse position
  h1.style.setProperty('--x', (e.clientX - p.top)   'px');
  h1.style.setProperty('--y', (e.clientY - p.left)   'px');
};

Código de exemplo:

WORK

Resultado:

Quando você passa o mouse sobre o texto "WORK", o texto preto mudará gradualmente para branco conforme o cursor do mouse se move.