emancipate-vr/js/titleAnimation.js

document.addEventListener('DOMContentLoaded', () => {
  const title = document.getElementById('title');
  const text = title.innerText;
  title.innerHTML = '';

  // Wrap each letter in a span
  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    const span = document.createElement('span');
    // Use non-breaking space for spaces to ensure they are not collapsed
    span.innerHTML = char === ' ' ? '&nbsp;' : char;
    title.appendChild(span);
  }

  const letters = title.getElementsByTagName('span');

  function getRandomColor() {
    const hexChars = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += hexChars[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  // Animate each letter independently
  for (let i = 0; i < letters.length; i++) {
    const letter = letters[i];

    // Don't animate spaces
    if (letter.innerHTML === '&nbsp;') continue;

    letter.style.color = getRandomColor();

    // Assign a persistent random interval for this letter's animation loop
    const randomInterval = Math.random() * 500 + 500; // 100ms to 600ms

    function animateLetter() {
      const randomRotation = Math.random() * 40 - 20; // -20 to +20 degrees
      letter.style.transform = `rotate(${randomRotation}deg)`;

      // Continue the loop for this specific letter
      setTimeout(animateLetter, randomInterval);
    }

    // Start the animation for this letter after a random initial delay
    setTimeout(animateLetter, Math.random() * 1000);
  }
});