Type writer effect in home page

lotengdev · Oct 27, 2024 · b8c58fd · b8c58fd
1 parent 24e983a
commit b8c58fd
Showing 1 changed file with 25 additions and 5 deletions.
diff --git a/src/pages/home/index.jsx b/src/pages/home/index.jsx
@@ -1,15 +1,35 @@
+import { useEffect, useState } from 'react';
 import TelegramIcon from '@/assets/icons/telegram.svg';
-import GithubIcon from '@/assets/icons/github.svg'
+import GithubIcon from '@/assets/icons/github.svg';
 
 export function HomePage() {
+    const [text, setText] = useState('');
+    const fullText = 'Beriuk Berajah dan Berkembang';
+    const typingDelay = 100; // Typing speed in milliseconds
+
+    useEffect(() => {
+        let index = 0;
+        const intervalId = setInterval(() => {
+            if (index < fullText.length) {
+                setText((prev) => prev + fullText.charAt(index));
+                index++;
+            } else {
+                clearInterval(intervalId);
+            }
+        }, typingDelay);
+
+        return () => clearInterval(intervalId); // Cleanup on unmount
+    }, []);
+
     return (
         <div className="flex justify-center items-center h-[80vh]" id="home">
             <div className="lg:flex justify-center p-[32px]">
                 <img src="./images/rafiki.png" className="lg:w-[30%] lg:h-[30%]" />
                 <div className="lg:w-[50%] lg:mt-0 mt-[25px]">
                     <div className="lg:mb-[16px] mb-[14px]">
-                        <span className="lg:text-[60px] text-[28px] font-extrabold lg:leading-[62px] leading-[40px]">Beriuk Berajah dan
-                            Berkembang</span>
+                        <span className="lg:text-[60px] text-[28px] font-extrabold lg:leading-[62px] leading-[40px]">
+                            {text}
+                        </span>
                     </div>
                     <div className="mb-[32px]">
                         <span className="lg:text-[20px] text-[12px] text-[#5C5C5C]">Komunitas programmer di Lombok Tengah yang membahas
@@ -27,5 +47,5 @@ export function HomePage() {
                 </div>
             </div>
         </div>
-    )
-}
+    );
+}