Слот-машина слов

Мы делаем
<span class="slot"><ul>
  <li>дизайн</li><li>код</li><li>моушн</li>
  <li>дизайн</li>   <!-- копия первого = бесшовный цикл -->
</ul></span>

<style>
.slot { display: inline-block; height: 1.2em; overflow: hidden; }
.slot li { height: 1.2em; list-style: none; }
.slot ul { margin: 0; padding: 0;
  transition: transform .55s cubic-bezier(.5,0,.2,1); }
</style>

<script>
var ul = document.querySelector(".slot ul");
var n = ul.children.length - 1, i = 0;
setInterval(function () {
  i++;
  ul.style.transition = "transform .55s cubic-bezier(.5,0,.2,1)";
  ul.style.transform = "translateY(-" + i * 1.2 + "em)";
  ul.style.filter = "blur(2px)";                 // смаз при движении
  setTimeout(function () { ul.style.filter = ""; }, 380);
  if (i === n) setTimeout(function () {          // скрытый сброс
    ul.style.transition = "none";
    ul.style.transform = "translateY(0)";
    i = 0;
  }, 600);
}, 2100);
</script>

Сделай слот-машину слов: окно inline-block высотой 1.2em с overflow:hidden, внутри ul со словами (li по 1.2em), последний элемент — копия первого. Каждые ~2.1s ul сдвигается translateY(-i*1.2em) за 0.55s по cubic-bezier(0.5,0,0.2,1) с моушн-блюром filter:blur(2px) на время движения; после докрутки до копии — мгновенный сброс без transition к началу (бесшовный цикл). min-width окна — по самому длинному слову.