JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="starField">
</canvas>
<div id="buttons">
    <div>
        <label>Max new stars per frame</label>
        <input type="number" id="maxNewStarsPerFrame">
    </div>
    <div>
        <label>Warp factor</label>
        <input type="number" id="velocity" min="1">
    </div>
    <div>
        <label>Spread</label>
        <input type="number" id="spread" minValue="1">
    </div>
</div>

CSS

body {
    background-color: black;
    overflow: hidden;
    font: 8pt helvetica, sans-serif;
}

#buttons {
    position: absolute;
    bottom: 5px;
    right: 5px;
    color: white;
    text-align: right;
}

JavaScript

// rAF polyfill
(function() {
    var lastTime = 0;
    var vendors = ['ms', 'moz', 'webkit', 'o'];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame =
        window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };

    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };
}());

function Hummingbird(heartbeat, domElement) {
    var id;
    var lastTime;

    function start() {
        stop();
        lastTime = Date.now();
        run();
    }

    function run() {
        id = requestAnimationFrame(function(time) {
            heartbeat(time - lastTime);
            lastTime = time;
            run();
        }, domElement);
    }

    function stop() {
        if (id) {
            cancelAnimationFrame(id);
            id = null;
        }
    }

    this.start = start;
    this.stop = stop;
}

function Star(context, starField) {
    var angle;
    var distance;
    var hue;
    var alpha;
    var size;

    function reset() {
        angle = Math.random() * 2 * Math.PI;
        distance = Math.random() * starField.spread;
        hue = (Math.random() * 360) | 0;
        alpha = 1 - Math.random() * 0.3;
        size = Math.random();
    }

    function setFillStyle() {
        var fillStyle = Star.fillStyles[hue];
        context.fillStyle = fillStyle || 'hsl(' + hue + ', 100%, 95%)';

        if (!fillStyle) {
     ...