<script>
const lettersWithClasses = { C: 'red', A: 'green', T: 'orange' };
function fadeIn(spanElement, index) {
setTimeout(() => {
spanElement.style.opacity = 1
}, index * 400 + 1000);
}
</script>
<div>
<h1 id="heading" class="h1 text-center text-[12rem] font-extrabold">
{#each Object.entries(lettersWithClasses) as [letter, color], index}
<span
style:color={color}
use:fadeIn={index}
>{letter}</span>
{/each}
</h1>
</div>
<style>
h1 > span {
opacity: 0;
transition: opacity 1s ease-in;
}
</style>