basic site added

components/actions/TextShuffler.jsx

@@ -0,0 +1,42 @@
+import React, { Fragment, useEffect, useState } from 'react'
+
+let timer = 0;
+let keyNum = 0;
+let textTimeout;
+let chars = ("abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+=-;.,/?><][}{:`~").split("");
+
+const TextShuffler = ({ textInput }) => {
+
+    let [text, setText] = useState(textInput);
+    let [refresh, setRefresh] = useState(0);
+
+    useEffect(() => {
+
+        let shuffledText = () => {
+            let textArray = textInput.split("");
+            let newTextArray = [];
+            textArray.forEach(char => {
+                if (char === " ") {
+                    return newTextArray.push(" ")
+                }
+                newTextArray.push(chars[Math.floor(Math.random() * 85)])
+            })
+
+            return newTextArray.join("");
+        }
+
+        textTimeout = setTimeout(() => {
+            if (timer === 7) {
+                setText(textInput);
+                return window.clearTimeout(textTimeout);
+            };
+            setText(prev => prev);
+            setRefresh(prev => prev + 1);
+            timer++
+        }, 200);
+    }, [refresh])
+
+    return (<span className="shuffled-text-span">{text.split("").map(char => <span key={keyNum++} style={{ animationDelay: Math.random() + "s", animationDuration: (Math.random() * 2) + "s" }}>{char}</span>)}</span>)
+}
+
+export default TextShuffler