ECO-194: Add typed-js and update the design/animation (#782)

* add typed-js and update the design/animation

* remove console

apps/web/package.json

@@ -46,6 +46,7 @@
     "satori": "^0.10.14",
     "sharp": "^0.33.4",
     "twemoji": "^14.0.2",
+    "typed.js": "^2.1.0",
     "usehooks-ts": "^3.1.0",
     "uuid": "^10.0.0",
     "viem": "2.x",

apps/web/src/components/Basenames/RegistrationBrand/index.tsx

@@ -1,9 +1,9 @@
-import { Transition } from '@headlessui/react';
 import { useRegistration } from 'apps/web/src/components/Basenames/RegistrationContext';
 import { Icon } from 'apps/web/src/components/Icon/Icon';
 import classNames from 'classnames';
-import { useState } from 'react';
-import { useInterval } from 'usehooks-ts';
+import { useEffect, useRef } from 'react';
+
+import Typed from 'typed.js';
 
 const SEARCH_LABEL_COPY_STRINGS = [
   'Build your Based profile',
@@ -11,17 +11,24 @@ const SEARCH_LABEL_COPY_STRINGS = [
   'Simplify onchain transactions',
 ];
 
-const useRotatingText = (strings: string[]) => {
-  const [currentIndex, setCurrentIndex] = useState(0);
-  useInterval(() => {
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % strings.length);
-  }, 3000);
-  return strings[currentIndex];
-};
-
 export default function RegistrationBrand() {
-  const rotatingText = useRotatingText(SEARCH_LABEL_COPY_STRINGS);
+  const typedTextRef = useRef<HTMLParagraphElement>(null);
+  const typedInstance = useRef<Typed>();
   const { searchInputFocused } = useRegistration();
+
+  useEffect(() => {
+    if (typedTextRef.current && !typedInstance.current) {
+      typedInstance.current = new Typed(typedTextRef.current, {
+        strings: SEARCH_LABEL_COPY_STRINGS,
+        typeSpeed: 50,
+        backDelay: 3000,
+        backSpeed: 40,
+        loop: true,
+        showCursor: false,
+        autoInsertCss: false,
+      });
+    }
+  }, []);
   return (
     <div className="relative flex w-full flex-row">
       <div className="flex items-center gap-1">
@@ -35,22 +42,11 @@ export default function RegistrationBrand() {
         </span>
         <h1 className="text-md font-bold md:text-xl">Basenames</h1>
       </div>
-      {SEARCH_LABEL_COPY_STRINGS.map((string) => (
-        <Transition
-          key={string}
-          show={rotatingText === string}
-          className="transition-opacity"
-          enter="delay-500"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <p className="sm:text-md absolute right-0 flex h-full items-center text-xs md:text-xl">
-            {string}
-          </p>
-        </Transition>
-      ))}
+
+      <p
+        className="sm:text-md absolute right-0 flex h-full items-center text-xs md:text-xl"
+        ref={typedTextRef}
+      />
     </div>
   );
 }

yarn.lock

@@ -399,6 +399,7 @@ __metadata:
     sharp: ^0.33.4
     tailwindcss: ^3.2.4
     twemoji: ^14.0.2
+    typed.js: ^2.1.0
     typescript: 5.0.4
     usehooks-ts: ^3.1.0
     uuid: ^10.0.0
@@ -23952,6 +23953,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typed.js@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "typed.js@npm:2.1.0"
+  checksum: 688f8a13a2a93317c87bb499f9d4159a0df5e5f67960cddd96a11ae53362b78ab5597d32eb3b300d97ddbe71c1dd5dd817625687ccc8be810643f3922d92b64d
+  languageName: node
+  linkType: hard
+
 "typedarray-to-buffer@npm:3.1.5, typedarray-to-buffer@npm:^3.1.5":
   version: 3.1.5
   resolution: "typedarray-to-buffer@npm:3.1.5"