Stap 1

Hamburger menu inschakelen.

Stap 2

Tekst naar het midden uitlijnen en groter maken.

Code

@keyframes appear {
    0% {
        clip-path: polygon(100% 0, 100% 0, 150% 100%, 150% 100%);
  opacity: 0;
    }
    100% {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
    }
}
  
    #r5001 {
margin-left: auto !important;
  }

#m5000.opened-menu > ul {
    width: 100vw !important;
    left: 0vw !important; 
        animation: appear 0.4s linear both;
}

  #m5000 > ul .closeBtn {
    font-size: 3em;
        top: 50px !important;
        right: 50px !important;
cursor: pointer;
}

.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 */
}