アルファベットがランダムに表示するアニメーションを作成

<div id="column1">
	<div class="textcontent textcontent1">
		<h1 class="log">VOCAL</h1>
	</div>
</div>

#column1 {
    display: grid;
	place-content: center;
	height: 100vh;
	width: 100vw;
	background-image: url("../images/jazz001.jpeg");
	background-repeat: no-repeat;
	background-position: 70% center;
	background-size: cover;
	position: relative;
	overflow: hidden;
	color: #fff;
}

.textcontent{
	opacity: 0;
	text-transform: uppercase;
}

const alphabets = [...Array(26)].map((a, b) => (10 + b).toString(36)); //アルファベット配列
/*--- 配列シャッフル関数 ---*/
function shuffleArray(sourceArr) {
  // 元の配列の複製を作成
  const array = sourceArr.concat();
  // Fisher–Yatesのアルゴリズム
  const arrayLength = array.length;
  for (let i = arrayLength - 1; i >= 0; i--) {
    const randomIndex = Math.floor(Math.random() * (i + 1));
    [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
  }
  return array;
}

const alphabetsArray1 = new Array(23); //配列数個
const alphabetsArrayLength1 = alphabetsArray1.length; //配列の長さ
const aboutAlphabets1 = document.querySelector('.log') //テキストCLASS

const alphabetsAnimateFade1 = (entries, obs) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {

		for(let i = 0; i < alphabetsArray1.length; i++){
			const shuffleAlphabets1 = shuffleArray(alphabets);
			alphabetsArray1[i] = `${shuffleAlphabets1[0]}${shuffleAlphabets1[1]}${shuffleAlphabets1[2]}${shuffleAlphabets1[3]}${shuffleAlphabets1[4]}`;
			setTimeout(  () => {
				aboutAlphabets1.innerHTML = alphabetsArray1[i];
			}, 10 * i + 1.37 ** i) 
		}
		setTimeout( () => {
			aboutAlphabets1.innerHTML = ('VOCAL');
		}, 10 * alphabetsArrayLength1 + 1.37 ** alphabetsArrayLength1)

		// 一度表示したら監視をやめる
		obs.unobserve(entry.target);
	}
  });
};
const alphabetsFadeObserver1 = new IntersectionObserver(alphabetsAnimateFade1);

// .logを監視するよう指示
const alphabetsFadeElements1 = document.querySelectorAll('.log');
alphabetsFadeElements1.forEach((fadeElement) => {
  alphabetsFadeObserver1.observe(fadeElement);
});