<textarea rows=20 placeholder="Type something!"></textarea>
<div id="relative">
  <div id="debounced">Type something!</div>
  <div id="placekitten"></div>
</div>
*:focus {
  outline: none;
}
body {
  font-family: Arial;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: lawngreen;
  background-color: indigo;
}

textarea {
  font-size: 15px;
  width: 500px;
  padding: 10px;
  border-radius: 10px;
  resize: none;
}

#relative {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#debounced {
  position: absolute;
  margin: 25px 0;
  font-size: 25px;
  white-space: nowrap;
}

#placekitten {
  display: none;
  position: relative;
  top: 85px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 175px;
  height: 175px;
  border-radius: 10px;
  box-shadow: 0 0 25px black;
  animation: focus 1s ease;
}

.animation {
  animation: focus 1s ease;
}

@keyframes focus {
  0% {
    filter: blur(12px);
    opacity: 0;
  }
  50% {
    filter: blur(0px);
    opacity: 1;
    font-size: 35px;
    letter-spacing: 5px;
  }
  100% {
    font-size: 25px;
    letter-spacing: 0px;
  }
}
const textarea = document.querySelector('textarea');
const debounced = document.querySelector('#debounced');
const placekitten = document.querySelector('#placekitten');

let timeout;
textarea.addEventListener('input', (e) => {
  debounced.removeAttribute('class');
  placekitten.style.display = 'none';
  
  if (e.data === null) {
    debounced.textContent = 'Type something!';
    clearTimeout(timeout);
    return;
  } else {
    debounced.textContent = '';
    clearTimeout(timeout);
  }
 
  timeout = setTimeout(() => {
    debounced.className = 'animation';
    debounced.textContent = 'You just typed something!';
    getKitten();
  }, 750);
  
});

function getKitten() {
  const width = (Math.floor( Math.random() * 3 ) + 1) * 100;
  const height = (Math.floor( Math.random() * 3 ) + 1) * 100;
  placekitten.style.backgroundImage = `url("http://placekitten.com/${width}/${height}")`;
  placekitten.style.display = 'block';
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.