.darkspottext {
font-size: 64px;
font-weight: 400;
color: #393939;
display: inline-block;
letter-spacing: normal;
}

.darkspottext span {
display: inline;
color: #393939;
animation: fadeToWhite 0.8s ease-in forwards;
}

@keyframes fadeToWhite {
to {
color: #FFFFFF;
}
}

<script>

document.querySelectorAll('.darkspottext').forEach(el => {
const text = el.textContent;
el.textContent = '';

[...text].forEach((char, i) => {
const span = document.createElement('span');
span.textContent = char;

// Begin traag, daarna iets sneller
const delay = i < 4 ? i * 0.12 : (4 * 0.12) + ((i - 4) * 0.07);
span.style.animationDelay = `${delay}s`;

el.appendChild(span);
});
});

</script>

.custom5 {
color: transparent; /* Geen vulling */
-webkit-text-stroke: 2px #B77AFF; /* Zwarte outline */
text-stroke: 1px #923DFF; /* Voor andere browsers */
}

.custom9 {
background: url('/uploads/yyI36HtZ/leon-overweel-GZd3l4Yxdxs-unsplash__msi___jpg.jpg') no-repeat center center;
background-size: cover;
-webkit-background-clip: text;
background-clip: text;
color: transparent;

-webkit-text-stroke: 0px #fff; /* Witte outline */
text-stroke: 2px #fff; /* Voor andere browsers */
}