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'));
var mostRecent = {
x: 0,
y: 0,
changed: 0
};
function updateDivs(){
var transform = 'translate3d(' + mostRecent.x + 'px, ' +
mostRecent.y + 'px, 0)';
divs.forEach(function(div){
div.style.webkitTransform = transform;
});
}
document.documentElement.addEventListener('mousemove', function(event){
mostRecent.x = event.pageX;
mostRecent.y = event.pageY;
mostRecent.changed = 1;
});
function frame(){
if (mostRecent.changed === 1){
mostRecent.changed = 0;
updateDivs();
}
webkitRequestAnimationFrame(frame);
}
frame();