JSFiddle - React, Tailwind, and code Playground

by benmosher

HTML

<body>
    <div id="overlay" style="width: 100%; height: 100%; position: absolute; z-index: 2"></div>
    <img id="falsecursor" src="http://telcontar.net/Misc/screeniecursors/Cursor%20arrow%20white.png" style="position: absolute; z-index: 1" />
    <input type="button" id="button" value="try to click this" style="position: absolute;"></input>
</body>

CSS

* {
    cursor: none;
}

JavaScript

var normal;
var tremorBasePx = 20;

function sampleInt(magnitude) {
    return normal[Math.round(Math.random() * normal.length)] * magnitude;
}

$(document).ready(function () {
    var $cursor = $('#falsecursor');
    var lastCursor = {clientX:0, clientY:0}
    setInterval(function () {
        var randX = sampleInt(tremorBasePx);
        var randY = sampleInt(tremorBasePx);
        $cursor.css({
            'top': lastCursor.clientY + randY,
            'left': lastCursor.clientX + randX,
            'transition': 'top 0.2s, left 0.2s linear'
        });
    }, 200);
    $(document).mousemove(function(e){lastCursor = e;});

    $('#overlay').click(function (e) {
        var x = parseInt($cursor.css('left'), 10);
        var y = parseInt($cursor.css('top'), 10);
        $(this).hide();
        $cursor.hide();
        var element = document.elementFromPoint(x, y);
        $(this).show();
        $cursor.show();
        $(element).click();
    });

    var clicks = 0;
    $('#button').click(function () {
        $(this).val('clicks: ' + (++clicks)).css({
            'top': sampleInt(100) + 200,
            'left': sampleInt(100) + 200
        });
    });
});


normal = [-0.954486511205664, -0.390343505844172, 0.954967163741049, -0.741969088844115, 0.415498313809018, 1.11448864081483, 0.76051606293719, 0.737922868989143, -0.538210735151749, 2.95321369930028, 1.29722248593233, 0.879352418857219, -0.431491137709812, 0.907957414011492, 1.32937856972126, -2.06193940045371, 0.853924002501051, 0.644568387942851, 0.29585966062521, 0.029283909642257, -0.116309884538336, -0.21247946969567, 0.520679721081564, 1.40888714495192, -0.872289147256009, -0.895142161740987, -0.210110524304462, -1.09347050985988, -1.24695998274644, 0.108705615063444, -0.0299178988550738, 1.47641798733614, 0.489325530238317, -1.25614368071793, -0.265909415432471, 0.526102923817908, -0.10480962312103, -1.07215275189888, -0.383193549659934, 0.51002010941531, 0.944163306601511, -0.0321767673468271,...