JSFiddle - React, Tailwind, and code Playground

by Ryan Brackett

HTML

<script src="http://bigspaceship.github.io/shine.js/js/shine.min.js"></script>
<link rel="stylesheet" href="http://bigspaceship.github.io/shine.js/css/main.css">
<div class="wrapper">
    <header class="big-banner tall demo-header">
         <h1 id="my-shine-object" class="shine large light shine-text-color"> Mark Dowd</h1>

        <p class="medium shine-text-color shine-text-color-dark">Husband, father, friend.</p>
        <br/>
        <br/>
        <br/>
        <br/>http://bigspaceship.github.io/shine.js/</header>
</div>

CSS

.wrapper {
    width: 80%;
    margin: auto;
}
.big-banner.tall {
    padding-top: 5em;
}

JavaScript

$(document).ready(function () {
    var shine = new Shine(document.getElementById('my-shine-object'));
    window.addEventListener('mousemove', function (event) {
        shine.light.position.x = event.clientX;
        shine.light.position.y = event.clientY;
        shine.draw();
    }, false);
})