JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display"></div>

CSS

#display {
  font: 36px Arial, sans-serif;
}

.blur-and-back {
  animation: 2s blur_and_back;
}

@keyframes blur_and_back {
  0% {
    filter: blur(0);
  }

  50% {
    filter: blur(0.72em);
  }

  100% {
    filter: blur(0);
  }
}

JavaScript

const names = ["Peter", "Paul", "Mary"];
const displayElement = document.querySelector("#display");

function pickOne(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

let name = pickOne(names),
  prevName = name;
  
displayElement.innerHTML = name;

setInterval(() => {
  name = pickOne(names);
  if (name !== prevName) {
    displayElement.classList.add("blur-and-back");
    
    setTimeout(() => {
      displayElement.innerHTML = name;
    }, 1000);

    setTimeout(() => {
      displayElement.classList.remove("blur-and-back");
    }, 2000);
    prevName = name;
  }

}, 3000);