compass

<div id="box" style="border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: dodgerblue; width: 100px; height: 100px; box-shadow: 2px 4px 8px silver;">
</div>


<div style="display: nonez">
	<div>
		alpha: <span id="coordinate-alpha"></span>
	</div>
	<div>
		beta: <span id="coordinate-beta"></span>
	</div>
	<div>
		gamma: <span id="coordinate-gamma"></span>
	</div>
</div>

<script>
	
let box = document.getElementById('box');
let span_alpha = document.getElementById('coordinate-alpha');
let span_beta = document.getElementById('coordinate-beta');
let span_gamma = document.getElementById('coordinate-gamma');
	
window.addEventListener('deviceorientation', function(e) {
  console.log(e.alpha + ' : ' + e.beta + ' : ' + e.gamma);
	span_alpha.textContent = e.alpha;
	span_beta.textContent = e.beta;
	span_gamma.textContent = e.gamma;
	box.style.boxShadow = `${e.gamma*2}px ${e.beta*2}px 8px silver`;	
});

</script>