How do I make a 360 degree moving shadow of my H1 text?

[Tanaz]

So on my personal website I have a circular gradient background that uses mouse tracking to move dynamically. I did this by using the mousemove event listener like this:

 

"use client";

import { useState, useEffect } from "react";

export const useMousePosition = () => {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });

  const updateMousePosition = (e) => {
    setMousePosition({ x: e.clientX, y: e.clientY });
  };

  useEffect(() => {
    window.addEventListener("mousemove", updateMousePosition);
    return () => {
      window.removeEventListener("mousemove", updateMousePosition);
    };
  }, []);

  return mousePosition;
};

and then adding in-line styling to my jsx page that use the x and y position of the mouse to move the background circle gradient.

 

I want to use this gradient as a "flashlight" effect to illuminate the text of my H1 and for it's shadow to move dynamically based on where the mouse cursor is. The issue is that while this mouse tracking function works perfectly with my gradient it does NOT with the text shadow because the shadow css property accepts both positive and negative X and Y coordinate values that calculates the position of the shadow based on the element its attached to while the mouse event listener uses only positive values. How do I reuse this function ( or make another one) that translates the numbers to negative based on my h1 positioning or is there a CSS property I might be missing?

 

I know this is hard to explain so I will provide a short video:

https://streamable.com/a20kge

 

By using

style={{
              textShadow: `-${x / 20}px -${y / 20}px 14px rgba(0, 0, 0, 0.61)`,
            }}

Negative X and Y values (divided by 20 so the shadow can stay closer to the h1 element) I can get the text to move up and to the left but not down and to the right. It's difficult to explain better, hopefully someone will understand what I'm trying to achieve.