JSFiddle - React, Tailwind, and code Playground
HTML
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</div>
<div class="follower">
<div></div><div></div><div></div><div></div><div></div>
...
CSS
html {
/* Let there be scroll! */
height: 2000px;
}
.follower {
border: 1px solid black;
padding: 2px 5px;
width: -webkit-fit-content;
}
.follower:not(:last-child) {
border-bottom: none;
}
.follower > div {
display: inline-block;
width: 10px;
height: 10px;
background-color: #48f;
opacity: 0.8;
border: 1px solid black;
}
.follower > div:not(:nth-child(5n)) {
border-right: none;
}
JavaScript
// 160 divs following your cursor. Not even close to busting the 16ms barrier.
var divs = [].slice.call(document.querySelectorAll('.follower'));
document.documentElement.addEventListener('mousemove', function(event){
var transform = 'translate3d(' + event.pageX + 'px, ' +
event.pageY + 'px, 0)';
divs.forEach(function(div){
div.style.webkitTransform = transform;
});
});