Text-shadow by aubergene

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello world</title>
    <style>
        body {
            margin: 0
        }

        section {
            background: #999;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        h1 {
            font-family: serif;
            color: #999;
            font-size: 100px;
            -webkit-text-stroke: 2px #999;
            text-stroke: 2px #999;
        }
    </style>
</head>
<body>
    <section>
        <h1>Hello world</h1>
    </section>
    <script>
        var el = document.querySelector('h1')

        var blur = 0 // It's only fast with zero blur
        var layers = 100

        function shadowString(x, y) {
            var s = ""
            for (let i = 1; i <= layers; i++) {
                s += `${x * i}px ${y * i}px ${blur}px #555, `
            }
            return s.slice(0, -2)
        }

        window.onmousemove = function(e) {
            var x = 1 - e.clientX / (window.innerWidth / 2)
            var y = 1 - e.clientY / (window.innerHeight / 2)

            console.log(shadowString(x, y))
            el.style.textShadow = shadowString(x, y)
            // el.style.textShadow = `${x}px ${y}px 1px #000, ${x*2}px ${y*2}px 1px #000, ${x * 3}px ${y * 3}px 1px #000`
            // el.style.textShadow = `1px 1px 0px #000, 2px 2px 0px #000, 3px 3px 0px #000'
        }

    </script>
</body>
</html>