feat: add typewriter effect

typewriter/src/App.tsx

@@ -4,7 +4,9 @@ import { fetchBodyText } from "./api/fetchBodyText";
 function App() {
   const [bodyText, setBodyText] = useState("");
   const [loading, setLoading] = useState(true);
+  const [visibleText, setVisibleText] = useState("");
 
+  // Call to load flag
   useEffect(() => {
     async function load() {
       setLoading(true);
@@ -15,9 +17,28 @@ function App() {
     load();
   }, []);
 
+  // Typewriter effect
+  useEffect(() => {
+    if (!loading && bodyText) {
+      let index = 0;
+      const delay = 500; // 0.5ms per character
+
+      const type = () => {
+        setVisibleText(bodyText.slice(0, index));
+        index++;
+        if (index <= bodyText.length) {
+          setTimeout(type, delay);
+        }
+      };
+
+      type();
+    }
+  }, [loading, bodyText]);
+
+
   return (
     <div className="App">
-      {loading ? <p>Loading...</p> : <p>{bodyText}</p>}
+      {loading ? <p>Loading...</p> : <p>{visibleText}</p>}
     </div>
   );
 }