JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<div id="box"></div>

CSS

#box { width:100px; height:100px; background: magenta; color:#000; 
    position:absolute;
    top:0; left: 0;
    border-radius: 50px;
}

JavaScript

var box = $('#box');

window.addEventListener("deviceorientation", function(e) {
    console.log("%s %s %s", e.alpha, e.beta, e.gamma);
    
    var x = Math.abs(e.beta * 8) + 50,
        y = Math.abs(e.gamma * 12) + 50;
    
    box.animate({'left': x + "px", 'top': y +"px" },1);

}, true)