JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/npm/ola"></script>
<script src="https://unpkg.com/brynja/cdn/brynja.js"></script>
<div id="root"></div>

CSS

* {
  cursor: none;
  overflow: hidden;
}

.box {
  position: absolute;
  opacity: 0.5;
  border-radius: 50%;
}

.red {
  background: orangered;
}

.blue {
  background: skyblue;
}

JavaScript

const { render } = brynja;

const config = {
	tailLength: 100,
  tailCatchUp: i => 100/(1+i),
  tailSize: i => 100 - (100/config.tailLength)*i,
}

const mouse = { x: 100, y: 100 }
const tail = Array(config.tailLength).fill(0)
  .map((_, i) => Ola({ x: 100, y: 100 }, config.tailCatchUp(i)))
  
const applyTailUpdate = ({ x, y }, [el, ...rest]) => {
	el.set({ x, y });
  if (rest.length > 0) {
  	applyTailUpdate({ x: el.x, y: el.y }, rest);
  }
}

window.onmousemove = ev => {
  mouse.x = ev.clientX;
  mouse.y = ev.clientY
}

const update = () => {
  applyTailUpdate(mouse, tail);
	render(_=>_
    .children('div', tail.length, (_,i)=>_
      .class('box', 'red')
      .prop('style', `
        width: ${config.tailSize(i)}px;
        height: ${config.tailSize(i)}px;
        left: ${tail[i].x - (config.tailSize(i))/2}px;
        top: ${tail[i].y - (config.tailSize(i))/2}px;
      `)
    )
    .child('div', _=>_
      .class('box', 'blue')
      .prop('style', `
        width: 60px;
        height: 60px;
        left: ${mouse.x - 30}px;
        top: ${mouse.y - 30}px;
      `)
    )
  );
}

setInterval(update, 1);