From 16464aabd75fdfc05367626db638619de5f54630 Mon Sep 17 00:00:00 2001
From: Amit Amrutiya <amitamrutiya2210@gmail.com>
Date: Thu, 13 Jun 2024 16:42:50 +0530
Subject: [PATCH] add typewrite-effect for title

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>
---
 frontend/src/app/page.tsx                     |  33 ++-
 .../src/components/ui/typewriter-effect.tsx   | 190 ++++++++++++++++++
 2 files changed, 221 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/ui/typewriter-effect.tsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 3e0897d..28a5771 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -5,9 +5,36 @@ import Navbar from "@/components/Navbar";
 import { FlipWords } from "@/components/ui/filp-word";
 import GlobeSection from "@/components/Globe";
 import { Spotlight } from "@/components/ui/spot-light";
+import { TypewriterEffectSmooth } from "@/components/ui/typewriter-effect";
 
 export default function Home() {
   const words = ["Omegal", "Google Meet", "Whatsapp"];
+  const typewords = [
+    {
+      text: "All",
+    },
+    {
+      text: "in",
+    },
+    {
+      text: "one",
+    },
+    {
+      text: "Website",
+    },
+    {
+      text: "for",
+    },
+    {
+      text: "Meet",
+    },
+    {
+      text: "and",
+    },
+    {
+      text: "Chat",
+    }
+  ];
   return (
     <main className="h-dvh overflow-auto">
       <Spotlight className="-top-40 left-0 md:left-60 md:-top-20" />
@@ -17,8 +44,10 @@ export default function Home() {
         <div
           className={`min-h-10vh text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 cursor-pointer animate-fadeIn my-5`}
         >
-          Miss <FlipWords words={words} />
-          ? <br /> All in one Website for Meet
+          <p>
+            Miss <FlipWords words={words} />?
+          </p>
+          <TypewriterEffectSmooth words={typewords} />
         </div>
         <div className="flex flex-col-reverse lg:flex-row min-h-[80ovh]">
           <section className="flex-grow lg:w-2/3 flex flex-wrap justify-center items-center">
diff --git a/frontend/src/components/ui/typewriter-effect.tsx b/frontend/src/components/ui/typewriter-effect.tsx
new file mode 100644
index 0000000..084325d
--- /dev/null
+++ b/frontend/src/components/ui/typewriter-effect.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { motion, stagger, useAnimate, useInView } from "framer-motion";
+import { useEffect } from "react";
+
+export const TypewriterEffect = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+
+  const [scope, animate] = useAnimate();
+  const isInView = useInView(scope);
+  useEffect(() => {
+    if (isInView) {
+      animate(
+        "span",
+        {
+          display: "inline-block",
+          opacity: 1,
+          width: "fit-content",
+        },
+        {
+          duration: 0.3,
+          delay: stagger(0.1),
+          ease: "easeInOut",
+        }
+      );
+    }
+  }, [isInView]);
+
+  const renderWords = () => {
+    return (
+      <motion.div ref={scope} className="inline">
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <motion.span
+                  initial={{}}
+                  key={`char-${index}`}
+                  className={cn(
+                    `dark:text-white text-black opacity-0 hidden`,
+                    word.className
+                  )}
+                >
+                  {char}
+                </motion.span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </motion.div>
+    );
+  };
+  return (
+    <div
+      className={cn(
+        "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
+        className
+      )}
+    >
+      {renderWords()}
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
+          cursorClassName
+        )}
+      ></motion.span>
+    </div>
+  );
+};
+
+export const TypewriterEffectSmooth = ({
+  words,
+  className,
+  cursorClassName,
+}: {
+  words: {
+    text: string;
+    className?: string;
+  }[];
+  className?: string;
+  cursorClassName?: string;
+}) => {
+  // split text inside of words into array of characters
+  const wordsArray = words.map((word) => {
+    return {
+      ...word,
+      text: word.text.split(""),
+    };
+  });
+  const renderWords = () => {
+    return (
+      <div>
+        {wordsArray.map((word, idx) => {
+          return (
+            <div key={`word-${idx}`} className="inline-block">
+              {word.text.map((char, index) => (
+                <span
+                  key={`char-${index}`}
+                  className={cn(
+                    `text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 `,
+                    word.className
+                  )}
+                >
+                  {char}
+                </span>
+              ))}
+              &nbsp;
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn("flex space-x-1 my-6", className)}>
+      <motion.div
+        className="overflow-hidden pb-2"
+        initial={{
+          width: "0%",
+        }}
+        whileInView={{
+          width: "fit-content",
+        }}
+        transition={{
+          duration: 2,
+          ease: "linear",
+          delay: 1,
+        }}
+      >
+        <div
+          className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
+          style={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {renderWords()}{" "}
+        </div>{" "}
+      </motion.div>
+      <motion.span
+        initial={{
+          opacity: 0,
+        }}
+        animate={{
+          opacity: 1,
+        }}
+        transition={{
+          duration: 0.8,
+
+          repeat: Infinity,
+          repeatType: "reverse",
+        }}
+        className={cn(
+          "block rounded-sm w-[4px]  h-4 sm:h-6 xl:h-12 bg-blue-500",
+          cursorClassName
+        )}
+      ></motion.span>
+    </div>
+  );
+};