Personal-Site/src/utils/GlitchText.svelte

54 lines
1.5 KiB
Svelte

<script lang="ts">
import { onMount } from "svelte";
let text:string;
export let strings:string[];
export let classVars:string;
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%^&*()_+[]{},.<>/?";
let stringIndex = 0;
function pickNextWord(){
shuffleLetters(strings[stringIndex]);
if(stringIndex == strings.length-1){
stringIndex = 0;
} else {
stringIndex ++;
}
}
//https://www.youtube.com/watch?v=W5oawMJaXbU
//Hpyerplexed FTW
function shuffleLetters(targetWord:string){
let itterations = 0;
const interval = setInterval(()=>{
text = targetWord.split("").map((letter, index) => {
if(index < itterations){
return targetWord[index];
}
return letters[Math.floor(Math.random()*letters.length)];
}).join("");
if(itterations >= targetWord.length){
clearInterval(interval);
}
itterations ++;
}, 40);
}
onMount(()=>{
stringIndex = Math.floor(Math.random()*strings.length)
pickNextWord();
setInterval(pickNextWord,5000);
})
</script>
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
<!-- <p class={classVars} on:mouseover={pickNextWord}> -->
<p class={classVars}>
{text}
</p>