JSFiddle - React, Tailwind, and code Playground

HTML

<div class='v'></div>
<div class='h'></div>

CSS

.v, .h {
    position: fixed;
    background-color: red;
}

.v {
   top: 0px;
   bottom: 0px;
   width: 3px;
}

.h {
   left: 0px;
   right: 0px;
   height: 3px;
}

JavaScript

$(function(){
function sign(x) { return x > 0 ? 1 : x < 0 ? -1 : 0; }
var timer = null;
var pause = false;
var maxSpeed = 10, minSpeed = 5;
var dx = (maxSpeed - minSpeed) * Math.random() + minSpeed, dy = (maxSpeed - minSpeed) * Math.random() + minSpeed;
var $v = $('.v'), $h = $('.h');
var x = $h.offset().top, y = $v.offset().left;
setInterval(function(){
   if (pause) return;
   if (x + dx > $(window).width()  || x + dx < 0)
       dx = -sign(dx) * ((maxSpeed - minSpeed) * Math.random() + minSpeed);
   if (y + dy > $(window).height() || y + dy < 0)
       dy = -sign(dy) * ((maxSpeed - minSpeed) * Math.random() + minSpeed);
   y = y + dy;
   x = x + dx;
   $h.offset({top:  y});
   $v.offset({left: x});    
}, 20);
$(document).on('mousemove click', function() {
    if (timer != null)
    {
       clearTimeout(timer);
       timer = null;
       pause = true;
       $v.fadeOut('fast');
       $h.fadeOut('fast');
    }
    timer = setTimeout(function(){ pause = false; $v.fadeIn('fast'); $h.fadeIn('fast'); }, 5000);
});
});