Поворот тени элемента в сторону курсора на javascript
 

В общем пытаюсь сделать что-то вроде библиотеки shine.js (пример: http://bigspaceship.github.io/shine.js/) но без его использования. Нужна помощь, как это реализовать правильно? (без jquery)

Набросок

<style>
div {
    position:absolute;
    left:100px;
    top:40px; }

.shadowtext {
    text-shadow: 8px 8px 16px black; /* Параметры тени */
    color: lightblue; /*  цвет текста */
    font-size: 80px; /* Размер надписи */
   }
</style>
<div>
<span class="shadowtext">T</span>
<span class="shadowtext">e</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">t</span> 
<span class="shadowtext">&nbsp;</span> 
<span class="shadowtext">s</span> 
<span class="shadowtext">h</span> 
<span class="shadowtext">a</span> 
<span class="shadowtext">d</span> 
<span class="shadowtext">o</span> 
<span class="shadowtext">w</span>
</div>  
<script>
var text = document.querySelectorAll(".shadowtext");
window.onmousemove = function(e) {
     for(var i = 0; i < text.length; i++) {
        var box = text[i].getBoundingClientRect();
        var x = box.left + (box.right - box.left) / 2 - e.clientX, 
              y = box.top + (box.bottom - box.top) / 2 - e.clientY;
        text[i].style.textShadow = x/10 + "px " + y/10 + "px " + (5 + (Math.abs(x) + Math.abs(y))/40) + "px black";
     }
}
</script>