RxJS (Trailing Letters)

Simple place for me to mess around with RxJS

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.0.1/Rx.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div id="letters"></div>

CSS

#letters {
  position: relative;
}

#letters span {
  position: absolute;
  font-size:1.5em;
}

JavaScript

const Observable = Rx.Observable;

const letters = createLetters("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa!");
const spacing = 15;
const animationLength = 1000;

console.log(letters);

const positions$ = Observable.fromEvent(document, 'mousemove')
	.map(event => ({left: event.clientX,top: event.clientY}));

letters.forEach((span, i) => {
	positions$.delay(i * (animationLength / letters.length))
  .subscribe(coords => {
    	span.style.top = `${coords.top}px`;
      span.style.left = `${coords.left + (i*spacing) + 15}px`;
  });
});

function createLetters(word){
	const target = document.getElementById('letters');

  return [...word].map(c => {
  	const el = document.createElement('span');
    el.class = 'fixed';
    el.innerText = c;
    
    target.appendChild(el);
    
    return el;
  });
}