<!-- Tutorial Link: https://devdojo.com/tnylea/create-a-typing-effect-in-alpinejs -->

<div class="w-screen h-screen flex items-center justify-center">
    
    <div class="max-w-7xl mx-auto text-center"
         x-data="{
                    text: '',
                    textArray : ['Alpine JS is Amazing'],
                    textIndex: 0,
                    charIndex: 0,
                    pause: 1000,
                    typeSpeed: 100,
                    direction: 'forward'
                 }"
         x-init="setInterval(function(){
                    let current = $data.textArray[ $data.textIndex ];
                    if($data.charIndex > current.length){
                         $data.direction = 'backward';
                    }   
                       
                    $data.text = current.substring(0, $data.charIndex);
                    if($data.direction == 'forward'){
                        $data.charIndex += 1;
                     } else {
                        $data.charIndex -= 1;
                        if($data.charIndex == 0){
                            $data.direction = 'forward';
                        }
                     }
                    
                 }, $data.typeSpeed);">
        <h1 class="text-7xl font-black" x-text="text"></h1>
    </div>
</div>