aranroig.com/frontend/app/components/parts/TableHeader.vue

<script setup lang="ts">
import HeaderLinks from './HeaderLinks.vue';
import SiteOptions from './site_options/SiteOptions.vue';
import StickyHeader from './StickyHeader.vue';

import { accent } from '~/composables/theme'
const spritePath = computed(() => {
    return `/sprites/${accent.value}/${accent.value}.gif`
});
const hasAnimated = useState('title-animated', () => false)

const asciiArt = [
  "█▀█ █▀▄ █▀█ █▀█ █▀▄ █▀█ ▀█▀ █▀▀    █▀▀ █▀█ █▄█",
  "█▀█ █▀▄ █▀█ █ █ █▀▄ █ █  █  █ █    █   █ █ █ █",
  "▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀ ▀▀▀ ▀▀▀ ▀▀▀ ▀  ▀▀▀ ▀▀▀ ▀ ▀"
];
const fullText = asciiArt.join('\n');

const displayedArt = ref("");
let charIndex = 0;
let intervalId: ReturnType<typeof setInterval> | null = null;

const dragon_names = ["katlum", "solus"];
const sprite_names = dragon_names.map(name => `/sprites/${name}/${name}.gif`);

const preloadImages = (imageArray) => {
  return Promise.all(
    imageArray.map(src => {
      return new Promise((resolve, reject) => {
        const img = new Image()
        img.src = src
        img.onload = resolve
        img.onerror = reject
      })
    })
  )
}

onMounted(() => {
    preloadImages(sprite_names);

   if (hasAnimated.value || displayedArt.value === fullText) {
     displayedArt.value = fullText;
     return;
   }

   intervalId = setInterval(() => {
     if (charIndex < fullText.length) {
       displayedArt.value += fullText[charIndex];
       charIndex++;
     } else {
       clearInterval(intervalId!);
       intervalId = null;
       hasAnimated.value = true;
     }
   }, 5);
 });

 onBeforeUnmount(() => {
   if (intervalId) clearInterval(intervalId);
 });

</script>

<template>
    <div class="header">
        <div class="header-container website">
                <pre v-html="displayedArt + (displayedArt.length < fullText.length ? '_' : '')" class="title ascii-art" aria-label="ARANROIG.COM"></pre>
                <HeaderLinks></HeaderLinks>
        </div>
        <div class="header-container right">
            <SiteOptions></SiteOptions>
        </div>
    </div>
    <div class="undertable-wrapper">
        <div class="undertable">
            <Sprite :path="spritePath"></Sprite> 
        </div>
    </div>
    <StickyHeader></StickyHeader>
</template>

<style lang="scss" scoped>
.header {
    position: relative;
    margin-top: 30px;
    user-select: none;
    display: flex;
    justify-content: space-between;
}

.header-container {
    
    &.website {
        z-index: 200;
        @media screen and (max-width: 600px) {
            margin-top: 20px;
        }
    }
}

.undertable-wrapper {
    position: relative;
    margin-top: -100px;
    display: flex;
    user-select: none;
    pointer-events: none;
    z-index: 1;

    @media screen and (max-width: 1200px) and (min-width: 900px) {
        margin-top: -340px;
    }

    @media screen and (max-width: 900px) and (min-width: 600px) {
        margin-top: -240px;
    }

    @media screen and (max-width: 600px) {
        margin-top: -240px;
    }
}

.undertable {
    position: relative;
    width: 160px;
    height: 180px;
}

.web-links {
    position: relative;
    z-index: 200;
    padding: 10px 20px;
    margin-bottom: -10px;
    left: -30px;
    background-color: var(--color-background);
}

.ascii-art {
    font-family: 'Hurmit', monospace;
    font-size: clamp(0.45rem, 1.8vw, 0.85rem);
    line-height: 1.18;
    letter-spacing: -0.05ch;
    white-space: pre;
    color: var(--color-text);
    min-height: clamp(1.59rem, 6.38vw, 3.01rem);
    min-width: clamp(11rem, 44vw, 23rem);
}

@keyframes blink {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
</style>