JSFiddle - React, Tailwind, and code Playground

by Nikita Jadhao

HTML

<div id="text-shadow-box">
  <!--  <div id="tsb-wall">
    </div>-->
    <p id="tsb-text">you shoudn't</p>
    <p id="tsb-link">look back!</p>
    <div id="tsb-spot"></div>
</div>

CSS

html,
body {
    margin: 0;
    padding: 0;
}

#text-shadow-box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #444;
    font-family: Helvetica, Arial, sans-serif;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-select: none;
}

    #text-shadow-box #tsb-wall {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 60%;
    }

    #text-shadow-box #tsb-wall {
        background: #999;
    }

        #text-shadow-box #tsb-wall p {
            position: relative;
            font-size: 18px;
            line-height: 1.5em;
            text-align: justify;
            color: #222;
            width: 550px;
            margin: 1.5em auto;
            cursor: default;
        }

            #text-shadow-box #tsb-wall p a {
                color: #fff;
            }

                #text-shadow-box #tsb-wall p a:hover {
                    text-decoration: none;
                    color: #000;
                    background: #fff;
                }

#tsb-spot {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    background: -webkit-gradient(radial, center center, 0, center center, 450, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
    background: -moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 450px);
    background: -o-radial-gradient(center, circle closest-side, transparent 0, black 450px);
}
 #text-shadow-box #tsb-text,
    #text-shadow-box #tsb-link {
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        height: 1em;
        margin: -0.77em 0 0 0;
        font-size: 90px;
        line-height: 1em;
        font-weight: bold;
        text-align: center;
    }

    #text-shadow-box #tsb-text {
        font-size: 100px;
        color: transparent;
        text-shadow: black 0px...

JavaScript

var spot = null;

init();

function init() {

    spot = document.getElementById('tsb-spot');

        document.getElementById('text-shadow-box').onmousemove = onMouseMove;
        document.getElementById('text-shadow-box').ontouchmove = function (e) {e.preventDefault(); e.stopPropagation(); onMouseMove({clientX: e.touches[0].clientX, clientY: e.touches[0].clientY});};
    
}

function onMouseMove(e) {
    if (typeof e === 'undefined' || typeof e.clientX === 'undefined') {
        return;
    }
    
    var xm = (e.clientX - Math.floor(window.innerWidth / 2)) * 0.4,
        ym = (e.clientY - Math.floor(window.innerHeight / 3)) * 0.4,
        d = Math.round(Math.sqrt(xm*xm + ym*ym) / 5);
    
    xm = e.clientX - Math.floor(window.innerWidth / 2);
    ym = e.clientY - Math.floor(window.innerHeight / 2);
    spot.style.backgroundPosition = xm + 'px ' + ym + 'px';
}