JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <meta charset="utf-8" />
    <title>Testing light-thing</title>
</head>
<body>

    <div class="light-circle"></div>

    <h1>Hi there!</h1>
    <p>
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
        This is a stupid test. 
    </p>

</body>
</html>

CSS

body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.light-circle {
    background: url('http://www.eight.se/light-test/img/light-test.png') no-repeat center center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4000px;
    width: 4000px;
    z-index: 100;
    overflow: hidden;
}
h1, p {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    width: 60%;
    padding: 7% 20% 0;
    font-size: 50px;
}
p {
    font-size: 32px;
}

JavaScript

!function ($) {

  $(function(){

    "use strict";

    var m_x, m_y;

    $('body').mousemove(function(e) {
      //2000 is half the image width/height, of course used for centering
      $('.light-circle').css({ backgroundPosition: (e.pageX-2000)+'px '+(e.pageY-2000)+'px' });
    });

  });

}(window.jQuery);