<div class="mouse__wrap">
    <div class="mouse__text">
        <h1 class="typo">Music is my life</h1>
    </div>
</div>

:root {
    --alpha: 0.8;
}
::selection {
    background-color: rgba(255, 0, 139, 0.8);
}
.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* cursor: none; */
}
.mouse__text {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.typo {
    color: rgba(255, 255, 255, var(--alpha));
    font-family: "Oswald", Helvetica, Arial, sans-serif;
    font-size: 10vw;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    transition: color 0.1s linear;
}

function getTwoDecimal(num) {
return parseFloat(num.toFixed(2) + 0.5);
}

const mouse = {
decimal(coord) {
    return getTwoDecimal(coord / 1000);
},
x(e) {
    return Math.abs(e.clientX - window.innerWidth / 2);
},
y(e) {
    return Math.abs(e.clientY - window.innerHeight / 2);
} };


const changeTextAlphaVal = (txt, e) => {
const root = document.querySelector(":root");
const cssVar = "--alpha";
const currentAlpha = getComputedStyle(root).getPropertyValue(cssVar).trim();

const max = parseFloat(currentAlpha);
const dx = mouse.decimal(mouse.x(e));
const dy = mouse.decimal(mouse.y(e));

let alphaVal;
if (dx <= 0) {
    alphaVal = dy >= max ? dy : getTwoDecimal(max - dy);
} else {
    alphaVal = dx >= max ? dx : getTwoDecimal(max - dx);
}

txt.style.setProperty(cssVar, alphaVal);
};

function createShadow(e, currTarget) {
const walk = Math.round(Math.max(window.innerWidth, window.innerHeight) / 6); 
const coordWalk = (coord, side) =>
Math.round(coord / side * walk - walk / 2);
const xWalk = coordWalk(e.clientX, currTarget.offsetWidth);
const yWalk = coordWalk(e.clientY, currTarget.offsetHeight);

const pink = [20, 40, 90];
const blue = [40, 180, 120];
const yellow = [100, 30, 190];
const typoAlpha = 0.6;

const typo = currTarget.querySelector(".typo");
changeTextAlphaVal(typo, e); 

typo.style.textShadow = `
    ${xWalk}px ${yWalk}px 0 rgba(${pink}, ${typoAlpha}),
    ${xWalk * -1}px ${yWalk * 2}px 0 rgba(${blue}, ${typoAlpha}),
    ${xWalk * -2}px ${yWalk * -1}px 0 rgba(${yellow}, ${typoAlpha})
    `;
}

function onMouseMove(e) {
createShadow(e, e.currentTarget);
}
function onTouchMove(e) {
createShadow(e.changedTouches[0], e.currentTarget);
}

const heading = document.querySelector(".mouse__text");
heading.addEventListener("mousemove", onMouseMove);
heading.addEventListener("touchmove", onTouchMove);