JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<p class="longshadow">СУПЕР ПАША</p>

CSS

body {
  font-family: "MS PGothic", sans-serif;
  background: #3c7896;
}
body p {
  padding: 0 1em;
  font-weight: bold;
  font-size: 4em;
  color: #fff;
}

JavaScript

var shadow = {
    'distance': 50,
    'opacity': 0.4,
    'blur': 0.15,
    'angle': 60,
    'bgcolor': [60, 120, 150]
}

function refreshLongshadow() {
    var val = '';
        var point = getPoint(1, shadow.angle);
    for(var i = 1; i <= shadow.distance; i++) {
        var per = (100 - 100 / shadow.distance * i) / 100;
        var tempColor = 
            Math.round((shadow.bgcolor[0] * (1 - shadow.opacity * per))) + ', ' +
            Math.round((shadow.bgcolor[1] * (1 - shadow.opacity * per))) + ', ' +
            Math.round((shadow.bgcolor[2] * (1 - shadow.opacity * per)))
        ;
        val += Math.round(point.x * i) + 'px ' + Math.round(point.y * i) + 'px ' + i * shadow.blur + 'px rgb(' + tempColor + ')';
        if(i != shadow.distance) val += ', ';
    }
    // console.log(val);
    $('.longshadow').css('text-shadow', val);

}

function getPoint(dis, deg){
    var point = {};
    var rad = Math.PI / 180 * deg;
    point.x = Math.cos(rad) * dis;
    point.y = Math.sin(rad) * dis;
    return point;
}

refreshLongshadow();

$('body').bind('mousemove',function(event) {
    var centerPoint = [$(this).width()/2, $(this).height()/2];
    var radian = Math.atan2(centerPoint[1] - event.pageY, centerPoint[0] - event.pageX);
    // console.log(event.pageX);
    console.log(radian);
    shadow.angle = radian * 180 / Math.PI;
    refreshLongshadow();
});