feat: pop animations

Author: nagarajpandith

src/components/animation/pop.tsx

@@ -0,0 +1,43 @@
+import React, { FC, ReactNode, useRef } from "react";
+import { motion, useInView } from "framer-motion";
+
+const PopAnimation: FC<{
+  className?: string;
+  children: ReactNode;
+}> = ({ className, children }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const isInView = useInView(ref, { once: true });
+
+  return (
+    <motion.div
+      ref={ref}
+      className={className}
+      initial="hidden"
+      animate={isInView ? "visible" : "hidden"}
+      variants={{
+        visible: {
+          opacity: 1,
+          scale: 1,
+          transition: {
+            type: "spring",
+            damping: 12,
+            stiffness: 100,
+          },
+        },
+        hidden: {
+          opacity: 0,
+          scale: 0,
+          transition: {
+            type: "spring",
+            damping: 12,
+            stiffness: 100,
+          },
+        },
+      }}
+    >
+      {children}
+    </motion.div>
+  );
+};
+
+export default PopAnimation;

src/components/animation/typing.tsx

@@ -4,14 +4,7 @@ export default function Typing() {
   return (
     <TypeAnimation
       cursor={true}
-      sequence={[
-        "Jab We Meet",
-        3000,
-        "जब हम मिले",
-        3000,
-        "ジャブ・ウィー・メット",
-        3000,
-      ]}
+      sequence={["Jab We Meet", 3000, "जब हम मिले", 3000, "ಜಬ್ ವಿ ಮೆಟ್", 3000]}
       wrapper="h2"
       className="animated-text text-3xl font-semibold sm:text-3xl lg:text-3xl xl:text-5xl 2xl:text-6xl"
       repeat={Infinity}

src/components/features/index.tsx

@@ -0,0 +1,11 @@
+const Features = () => {
+  return (
+    <section >
+            
+        
+
+    </section>
+  );
+};
+
+export default Features;

src/components/join/index.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import { useState } from "react";
 import { BsKeyboard } from "react-icons/bs";
+import CharacterAnimation from "../animation/character";
 
 const JoinRoom = () => {
   const [roomName, setRoomName] = useState<string>("");
@@ -28,7 +29,7 @@ const JoinRoom = () => {
         }`}
         onClick={() => router.push(`/rooms/${roomName}`)}
       >
-        Join
+        <CharacterAnimation text="Join" textStyle="text-sm"/>
       </button>
     </div>
   );

src/components/navbar/index.tsx

@@ -7,6 +7,7 @@ import { useState } from "react";
 import { signIn, signOut } from "next-auth/react";
 import { Session } from "next-auth";
 import { FcGoogle } from "react-icons/fc";
+import PopAnimation from "../animation/pop";
 
 const Navbar = ({
   status,
@@ -41,8 +42,19 @@ const Navbar = ({
       <div className="mx-auto max-w-5xl px-4">
         <div className="flex h-16 items-center justify-between">
           <Link href="/" className="flex items-center space-x-2">
-            <Image src="/logo.png" alt="Logo" width={40} height={40} priority />
-            <span className={`text-xl font-bold text-white`}>Jab We Meet</span>
+            <PopAnimation>
+              <Image
+                src="/logo.png"
+                alt="Logo"
+                width={40}
+                height={40}
+                priority
+              />
+            </PopAnimation>
+            <CharacterAnimation
+              text="Jab We Meet"
+              textStyle="text-xl font-bold text-white"
+            />
           </Link>
 
           <div className="hidden space-x-6 text-white lg:flex lg:items-center">
@@ -58,28 +70,32 @@ const Navbar = ({
                 />
               </Link>
             ))}
-            <button
-              className="lk-button"
-              onClick={() => {
-                if (status === "authenticated") {
-                  signOut();
-                } else {
-                  signIn("google");
-                }
-              }}
-            >
-              {status === "authenticated" ? (
-                "Sign Out"
-              ) : (
-                <div className="flex items-center space-x-2">
-                  <FcGoogle />
-                  <div>Sign In</div>
-                </div>
-              )}
-            </button>
-            <select className="lk-button">
-              <option value="en">English</option>
-            </select>
+            <PopAnimation>
+              <button
+                className="lk-button"
+                onClick={() => {
+                  if (status === "authenticated") {
+                    signOut();
+                  } else {
+                    signIn("google");
+                  }
+                }}
+              >
+                {status === "authenticated" ? (
+                  "Sign Out"
+                ) : (
+                  <div className="flex items-center space-x-2">
+                    <FcGoogle />
+                    <div>Sign In</div>
+                  </div>
+                )}
+              </button>
+            </PopAnimation>
+            <PopAnimation>
+              <select className="lk-button">
+                <option value="en">English</option>
+              </select>
+            </PopAnimation>
           </div>
 
           <div className="flex items-center space-x-4 lg:hidden">

src/pages/index.tsx

@@ -8,6 +8,8 @@ import { api } from "~/utils/api";
 import { AiOutlineVideoCameraAdd } from "react-icons/ai";
 import JoinRoom from "~/components/join";
 import Image from "next/image";
+import Features from "~/components/features";
+import CharacterAnimation from "~/components/animation/character";
 
 function ConnectionTab() {
   const { data: session, status } = useSession();
@@ -25,7 +27,7 @@ function ConnectionTab() {
     <>
       <Navbar status={status} session={session} />
       <div className="isolate flex h-screen w-screen flex-col items-center justify-center space-y-4 p-5 text-center md:flex-row">
-        <div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem] opacity-60">
+        <div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[-20rem]">
           <svg
             className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
             viewBox="0 0 1155 678"
@@ -52,22 +54,26 @@ function ConnectionTab() {
             </defs>
           </svg>
         </div>
-        
+
         <div className="w-full max-w-md space-y-4">
           <Typing />
 
-          <p className="text-sm text-gray-400">
-            Multilingual Video Conferencing App
-          </p>
+          <CharacterAnimation
+            className="flex justify-center"
+            textStyle="text-sm text-gray-400"
+            text="Multilingual Video Conferencing App"
+          />
 
           <div className="flex flex-col items-center space-y-4 lg:flex-row lg:space-y-0 lg:space-x-4">
             <button onClick={createRoomHandler} className="lk-button h-fit">
               <AiOutlineVideoCameraAdd />
-              Create Room
+              <CharacterAnimation text="Create Room" textStyle="text-sm" />
             </button>
 
             <JoinRoom />
           </div>
+
+          <Features />
         </div>
 
         <div className="flex w-full max-w-md items-center justify-center">
@@ -79,7 +85,7 @@ function ConnectionTab() {
             priority
           />
         </div>
-        <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)] opacity-60">
+        <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden opacity-60 blur-3xl sm:top-[calc(100%-30rem)]">
           <svg
             className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
             viewBox="0 0 1155 678"