Para crear este efecto, aquí hay algunos pasos para lograrlo, comenzando desde el final:

1. Querrás usar scaleX() y scaleY() en transformaciones CSS
2. Por lo tanto, deberá obtener de alguna manera la velocidad del movimiento del cursor en los ejes x e y.
3. Para obtener la velocidad necesitarás la siguiente información:
   • La posición actual del cursor (se accede fácilmente a través del objeto MouseEvent )
   • La posición anterior del cursor (necesitará almacenar esto en caché)
   • El tiempo transcurrido entre el evento de mouse anterior y el evento de mouse actual

Con esta estrategia en mente, así es como podría hacerse:

Paso 1: permita que su objeto de data almacene en caché las coordenadas XY y la marca de tiempo anteriores

Esto se puede hacer simplemente actualizando el objeto data :

 data() { return { hideCursor: false, prevX: 0, prevY: 0, prevTimeStamp: 0, }; },

Paso 2: asegúrese de almacenar en caché estos valores en la devolución de llamada de mousemove :

Necesitamos almacenar estos valores al final de la devolución de llamada de mousemove , y colocar el resto de nuestra lógica antes de eso (lo abordaremos más adelante).

 document.addEventListener("mousemove", (e) => { // SOME LOGIC HERE // Update cached values this.prevX = e.pageX; this.prevY = e.pageY; this.prevTimeStamp = e.timeStamp; });

Paso 3: Calcule la velocidad comparando el valor actual y el anterior

Para calcular la velocidad en los ejes X e Y, debe calcular la diferencia absoluta entre los valores X/Y anteriores y actuales, y dividirlos por el tiempo transcurrido:

 const deltaX = Math.abs(e.pageX - this.prevX); const deltaY = Math.abs(e.pageY - this.prevY); const deltaTime = e.timeStamp - this.prevTimeStamp; const velocityX = deltaX / deltaTime; const velocityY = deltaY / deltaTime;

Paso 4: determinar cómo traducir las velocidades en la transformación de escala CSS

Esto se determina de manera completamente arbitraria y depende de usted . Para mí, dividir la velocidad calculada por 10 da un efecto que no encuentro demasiado discordante/abrupto y aún perceptible para el usuario. Es posible que sea necesario cambiar este valor en función del tamaño de píxel absoluto del cursor.

 const scaleX = 1 + velocityX / 10; const scaleY = 1 + velocityY / 10; cursor.style.top = `${e.pageY}px`; cursor.style.left = `${e.pageX}px`; cursor.style.transform = `translate(-50%, -50%) scaleX(${scaleX}) scaleY(${scaleY})`;

(Opcional) Paso 5: asegúrese de manejar el evento mouseout en la ventana gráfica

Esto es para que el cursor no se atasque en un estado extraño cuando el mouse sale de la ventana gráfica:

 document.addEventListener('mouseout', () => { cursor.style.transform = 'none'; });

Vea un ejemplo actualizado basado en su CodeSandbox: