텍스트 모션

<div class="animatedTextSection">
    <div class="textContainer">
        <p class="animatedText" aria-label="Custom Font">
            <span aria-hidden="true">N</span><span aria-hidden="true">E</span><span aria-hidden="true">X</span><span aria-hidden="true">U</span><span aria-hidden="true">S</span><span aria-hidden="true"> </span><span aria-hidden="true">L</span><span aria-hidden="true">A</span><span aria-hidden="true">B</span>
        </p>
    </div>
</div>

<style>
@font-face {
    font-family: "CustomFont";
    src: url("https://pham.codes/d/GeistVF.woff2") format("woff2");
}

/* 🔹 텍스트 애니메이션 */
.animatedText {
    font-family: "CustomFont";
    font-size: 128px;
    margin: 0;
    background-image: linear-gradient(0deg, #111 70%, transparent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    filter: drop-shadow();
    --weightMin: 32;
    --weightMax: 240;
}

/* 🔹 개별 글자 애니메이션 */
.animatedText > span {
    animation: weightAnimation 1.5s alternate cubic-bezier(0.37, 0, 0.63, 1);
    animation-iteration-count: infinite;
    animation-delay: 1s;
    animation-fill-mode: both;
}

/* 🔹 애니메이션 설정 */
@keyframes weightAnimation {
    0% {
        font-variation-settings: "wght" var(--weightMin);
    }
    100% {
        font-variation-settings: "wght" var(--weightMax);
    }
}

/* 🔹 컨테이너 여백 0 적용 */
.textContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
    margin: 0;
}

/* 🔹 배경 제거 */
.animatedTextSection {
    height: 50vh;
}
</style>

<script>
const textSpans = document.querySelectorAll('.animatedText span');
const totalLetters = textSpans.length;

textSpans.forEach(function(span, index) {
    const mappedIndex = index - (totalLetters / 2);
    span.style.animationDelay = (mappedIndex * 0.25) + 's';
});
</script>