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 fullText = "ARANROIG.COM";
const displayedText = ref("");

let index = 0
let interval = 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) {
    displayedText.value = fullText
    return
  }

  interval = setInterval(() => {
    if (index < fullText.length) {
      displayedText.value += fullText[index]
      index++
    } else {
      clearInterval(interval)
      hasAnimated.value = true;
    }
  }, 35) // velocidad de escritura
})

onBeforeUnmount(() => {
  clearInterval(interval)
})

</script>

<template>
    <div class="header">
        <div class="header-container website">
                <h1 class="title">{{ displayedText }}</h1>
                <HeaderLinks></HeaderLinks>
        </div>
        <div class="undertable">
            <Sprite :path="spritePath" bottom="-60px" left="-75px"></Sprite> 
        </div>
        <div class="header-container">
            <SiteOptions></SiteOptions>
        </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 {
    position: relative;
    left: -200px;
    margin-top: 450px;
    margin-left: -425px;
    margin-bottom: 25px;
    user-select: none;
    pointer-events: none;

    @media screen and (max-width: 1200px) and (min-width: 900px) {
        left: -50px;
        bottom: 20px;
        margin-top: 350px;
    }

    @media screen and (max-width: 900px) and (min-width: 600px) {
        left: 70px;
        bottom: 50px;
        margin-top: 250px;
    }

    @media screen and (max-width: 600px) {
        left: 150px;
        bottom: 70px;
        margin-top: 250px;
    }
}

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

.title {
    width: 300px;
}

.title::after {
    content: "_";
    animation: blink 3s infinite;
    animation-timing-function: steps(1, end);
}

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