Создать курсор в поле наведения

Question

Я нашел эти сайты: https://www.samsaraubud.com/ https://www.castoretpollux.com/

и увидел круг курсора, который является маской для текста. Как я могу сделать это тоже? Это какая-то библиотека? Существуют ли подобные примеры с реализацией с открытым исходным кодом javascript?

Я создал круг, положение которого зависит от координат курсора, а также изменяет размер и положение по центру при наведении на элементы, но Я не могу сделать маску для текста. https://codepen.io/antonzelenkov1997/pen/ExVjRZE

HTML

<div class="circle-cursor--outer"></div>
<div id="app">
  <span class="cursorTarget first">Hello, it's me</span>
  <span class="cursorTarget second">Hello, it's me</span>
</div>

CSS

html {
  height: 100vh;
  width: 100%;
}

body {
  font-family: sans-serif;
  height: inherit;
}

#app {
  position: relative;
  height: inherit;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

span {
  font-size: 40px;
}

.first {
  z-index: 1;
  color: black;
}

.second {
  position: absolute;
  z-index: 2;
  color: black;
}

.circle-cursor--outer {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: 1px solid red
}

JS

// import {TweenMax} from 'gsap';

const second = document.querySelector('.second');

class CircleHover {
    constructor() {
        this.initCursor();
        this.initHovers();
    }

    initCursor() {
        this.outerCursor = document.querySelector(".circle-cursor--outer");
        this.outerCursorBox = this.outerCursor.getBoundingClientRect();
        this.outerCursorSpeed = 0;
        this.clientX = -100;
        this.clientY = -100;
        this.showCursor = false;

        const unveilCursor = () => {

            TweenMax.set(this.outerCursor, {
                x: this.clientX - this.outerCursorBox.width / 2,
                y: this.clientY - this.outerCursorBox.height / 2
            });
            setTimeout(() => {
                this.outerCursorSpeed = 0.2;
            }, 100);
            this.showCursor = true;
        };
        document.addEventListener("mousemove", unveilCursor);

        document.addEventListener("mousemove", e => {
            this.clientX = e.clientX;
            this.clientY = e.clientY;
        });

        const render = () => {

            if (!this.isStuck) {
                TweenMax.to(this.outerCursor, this.outerCursorSpeed, {
                    x: this.clientX - this.outerCursorBox.width / 2 - 35,
                    y: this.clientY - this.outerCursorBox.height / 2 - 35
                });
            }
            if (this.showCursor) {
                document.removeEventListener("mousemove", unveilCursor);
            }
            requestAnimationFrame(render);
        };
        requestAnimationFrame(render);
    }

    initHovers() {
        const handleMouseEnter = (e) => {
          // I need to know what I should insert insted "50% 50%". It depends on the coordinates of the cursor.
          second.setAttribute('style', `clip-path: circle(30px at 50% 50%); color:red;`);

            this.isStuck = true;
            const target = e.currentTarget;
            const box = target.getBoundingClientRect();
            this.outerCursorOriginals = {
                width: this.outerCursorBox.width,
                height: this.outerCursorBox.height
            };
            TweenMax.to(this.outerCursor, 0.2, {
                x: (box.right - box.width / 2) - 30,
                y: (box.bottom - box.height / 2) - 30,
                width: 60,
                height: 60,
                opacity: 1,
                transformOrigin: 'center center',
                backgroundColor: 'rgba(255, 255, 255, 0)',
                borderColor: "#DD2B29"
            });
        };

        const handleMouseLeave = () => {
            second.removeAttribute('style');

            this.isStuck = false;
            TweenMax.to(this.outerCursor, 0.2, {
                width: this.outerCursorOriginals.width,
                height: this.outerCursorOriginals.height,
                opacity: 1,
                backgroundColor: '#DD2B29',
                borderColor: "#DD2B29"
            });

        };

        const handleClick = (e, item) => {
            this.isStuck = true;
            item.removeEventListener("mouseleave", handleMouseLeave);

            TweenMax.to(this.outerCursor, 0.1, {
                width: 60,
                height: 60,
                opacity: 1,
                backgroundColor: '#DD2B29',
                borderColor: "#DD2B29"
            });

            TweenMax.to(this.outerCursor, 0.1, {
                width: 90,
                height: 90,
                opacity: 1,
                backgroundColor: '#DD2B29',
                borderColor: "#DD2B29",
                delay: 0.1,
            });

            TweenMax.to(this.outerCursor, 0.2, {
                width: this.outerCursorOriginals.width,
                height: this.outerCursorOriginals.height,
                delay: 0.2,
            });

            setTimeout(() => {
                item.addEventListener("mouseleave", handleMouseLeave);
                this.isStuck = false;
            }, 200);
        };

        [...document.querySelectorAll('.cursorTarget')].map(item => {
            item.addEventListener("mouseenter", handleMouseEnter);
            item.addEventListener("mouseleave", handleMouseLeave);
            item.addEventListener("click", (e) => handleClick(e, item));
        });
    }
}

const circleHover = new CircleHover();

Я пытался использовать клип -path, но это работает без привязки координат круга курсора к элементам. Как установить наведение на элемент с помощью координат курсора?