JSFiddle - React, Tailwind, and code Playground

by muztv

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/fpsmeter/0.3.1/fpsmeter.js"></script>
<div id="wrapper">
  <div id="joy">
  </div>
</div>

CSS

html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
}
#joy {
  position: fixed;
  background: green;
  border-radius: 300px;
  left: 50px;
  top: 50px;
  width: 300px;
  height: 300px;
}

JavaScript

var meter = new FPSMeter();

document.body.addEventListener('touchmove', function(e) {
	var x = e.touches[0].clientX - 100;
  var y = e.touches[0].clientY - 100;
	e.target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
  
  meter.tick();
}, false);