<main>
    <input type="range" min="0" max="100" value="0" />
    <div class="container"></div>
  </main>

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100dvh
}

body {
  display: grid;
  place-items: center;
  background: #171717;
  overflow-x: hidden;
}

main {
  zoom: 1.5;
  display: flex;
  position: relative;
  width: 200px;

  input {
    flex: 1;
    accent-color: white;
    cursor: pointer;
  }

  .container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
  }

  .heart {
    font-size: 25px;
    position: absolute;
    animation-fill-mode: forwards;
    translate: -20px -10px;
  }
}


@keyframes float-1 {
  0% {
    scale: 0.2;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    translate: 20px -130px;
    rotate: 15deg;
    scale: 1;
    opacity: 0;
  }
}

@keyframes float-2 {
  0% {
    scale: 0.3;
    opacity: 0;
  }

  30% {
    opacity: 1;
  }

  100% {
    translate: -10px -110px;
    rotate: -10deg;
    scale: 1;
    opacity: 0;
  }
}

@keyframes float-3 {
  0% {
    scale: 0.4;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    translate: -10px -140px;
    rotate: -20deg;
    scale: 0.8;
    opacity: 0;
  }
}

@keyframes float-4 {
  0% {
    scale: 0.4;
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    translate: 15px -100px;
    rotate: 30deg;
    scale: 0.7;
    opacity: 0;
  }
}

const range = document.querySelector('input');
const container = document.querySelector('.container');
const animations = ['float-1', 'float-2', 'float-3', 'float-4'];
const animationDuration = 1500; 

range.addEventListener('input', (e) => {
  const { value } = e.target;
  const randomAnimation = animations[Math.floor(Math.random() * animations.length)];

  const heart = document.createElement('div');
  heart.classList.add('heart');
  heart.textContent = '💙';
  heart.style.animationName = randomAnimation;
  heart.style.animationDuration = `${animationDuration}ms`;
  heart.style.filter = `hue-rotate(${value * 3.6}deg)`; // from 0 to 360deg
  heart.style.left = `${value}%`;

  container.appendChild(heart);
  
  heart.onanimationend = ({ target }) => target.remove();
});

function simulateUser(currentValue = 0, maxValue = 60) {
  if (currentValue <= maxValue) {
    range.value = currentValue;
    range.dispatchEvent(new Event('input'));
    setTimeout(() => simulateUser(currentValue + 1, maxValue), 25);
  }
}
setTimeout(() => simulateUser(), 250)