From 3e3aee5449bd4e740d408a20b8e3caeb40228267 Mon Sep 17 00:00:00 2001
From: Aleesssino <alesg3a1b4o1@gmail.com>
Date: Mon, 10 Jun 2024 16:53:05 +0200
Subject: [PATCH 1/5] fix(web): resolve encryption glitch in footer text

---
 apps/web/src/components/ui/encrypt-text.tsx | 27 +++++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ui/encrypt-text.tsx b/apps/web/src/components/ui/encrypt-text.tsx
index 7f47b499..c5111a07 100644
--- a/apps/web/src/components/ui/encrypt-text.tsx
+++ b/apps/web/src/components/ui/encrypt-text.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
 
 function EncryptText({
@@ -10,12 +10,18 @@ function EncryptText({
   // const TARGET_TEXT = 'Join Waitlist'
   const CYCLES_PER_LETTER = 2
   const SHUFFLE_TIME = 50
-
   const CHARS = '!@#$%^&*():{};|,.<>/?'
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
   const [text, setText] = useState(TARGET_TEXT)
+  const [width, setWidth] = useState<number | null>(null)
+  const textRef = useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    if (textRef.current) {
+      setWidth(textRef.current.offsetWidth)
+    }
+  }, [TARGET_TEXT])
 
   const scramble = (): void => {
     let pos = 0
@@ -45,20 +51,25 @@ function EncryptText({
 
   const stopScramble = (): void => {
     clearInterval(intervalRef.current || undefined)
-
     setText(TARGET_TEXT)
   }
 
   return (
-    <motion.button
-      className=" group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
+    <motion.div
+      className="group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
       onMouseEnter={scramble}
       onMouseLeave={stopScramble}
+      style={{ width: width ? `${width}px` : 'auto' }}
     >
+      <span className="invisible absolute" ref={textRef}>
+        {TARGET_TEXT}
+      </span>
       <div className="relative z-10 flex items-center gap-2">
-        <span className="flex">{text}</span>
+        <span className="flex" style={{ whiteSpace: 'nowrap' }}>
+          {text}
+        </span>
       </div>
-    </motion.button>
+    </motion.div>
   )
 }
 

From bf63104b60c3a0d736fcac9277aba16f26d3a751 Mon Sep 17 00:00:00 2001
From: Aleesssino <alesg3a1b4o1@gmail.com>
Date: Tue, 11 Jun 2024 00:02:26 +0200
Subject: [PATCH 2/5] fix(web): resolve encryption glitch in footer text

---
 apps/web/src/components/ui/encrypt-text.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/ui/encrypt-text.tsx b/apps/web/src/components/ui/encrypt-text.tsx
index c5111a07..50b3ab74 100644
--- a/apps/web/src/components/ui/encrypt-text.tsx
+++ b/apps/web/src/components/ui/encrypt-text.tsx
@@ -55,7 +55,7 @@ function EncryptText({
   }
 
   return (
-    <motion.div
+    <motion.button
       className="group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
       onMouseEnter={scramble}
       onMouseLeave={stopScramble}
@@ -65,11 +65,9 @@ function EncryptText({
         {TARGET_TEXT}
       </span>
       <div className="relative z-10 flex items-center gap-2">
-        <span className="flex" style={{ whiteSpace: 'nowrap' }}>
-          {text}
-        </span>
+        <span className="flex whitespace-nowrap">{text}</span>
       </div>
-    </motion.div>
+    </motion.button>
   )
 }
 

From ad2913a6b3657276443c31d3a5e27882d4b417ca Mon Sep 17 00:00:00 2001
From: Aleesssino <alesg3a1b4o1@gmail.com>
Date: Mon, 10 Jun 2024 16:53:05 +0200
Subject: [PATCH 3/5] fix(web): resolve encryption glitch in footer text

---
 apps/web/src/components/ui/encrypt-text.tsx | 27 +++++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ui/encrypt-text.tsx b/apps/web/src/components/ui/encrypt-text.tsx
index 7f47b499..c5111a07 100644
--- a/apps/web/src/components/ui/encrypt-text.tsx
+++ b/apps/web/src/components/ui/encrypt-text.tsx
@@ -1,5 +1,5 @@
 'use client'
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
 
 function EncryptText({
@@ -10,12 +10,18 @@ function EncryptText({
   // const TARGET_TEXT = 'Join Waitlist'
   const CYCLES_PER_LETTER = 2
   const SHUFFLE_TIME = 50
-
   const CHARS = '!@#$%^&*():{};|,.<>/?'
 
   const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
-
   const [text, setText] = useState(TARGET_TEXT)
+  const [width, setWidth] = useState<number | null>(null)
+  const textRef = useRef<HTMLSpanElement>(null)
+
+  useEffect(() => {
+    if (textRef.current) {
+      setWidth(textRef.current.offsetWidth)
+    }
+  }, [TARGET_TEXT])
 
   const scramble = (): void => {
     let pos = 0
@@ -45,20 +51,25 @@ function EncryptText({
 
   const stopScramble = (): void => {
     clearInterval(intervalRef.current || undefined)
-
     setText(TARGET_TEXT)
   }
 
   return (
-    <motion.button
-      className=" group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
+    <motion.div
+      className="group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
       onMouseEnter={scramble}
       onMouseLeave={stopScramble}
+      style={{ width: width ? `${width}px` : 'auto' }}
     >
+      <span className="invisible absolute" ref={textRef}>
+        {TARGET_TEXT}
+      </span>
       <div className="relative z-10 flex items-center gap-2">
-        <span className="flex">{text}</span>
+        <span className="flex" style={{ whiteSpace: 'nowrap' }}>
+          {text}
+        </span>
       </div>
-    </motion.button>
+    </motion.div>
   )
 }
 

From 4bd4f775c4b57c418073d5e28e1bfa3dab22d98f Mon Sep 17 00:00:00 2001
From: Aleesssino <alesg3a1b4o1@gmail.com>
Date: Tue, 11 Jun 2024 19:36:24 +0200
Subject: [PATCH 4/5] fix(web): resolve encryption glitch in footer text

---
 apps/web/src/components/ui/encrypt-text.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/ui/encrypt-text.tsx b/apps/web/src/components/ui/encrypt-text.tsx
index 50b3ab74..d35d590e 100644
--- a/apps/web/src/components/ui/encrypt-text.tsx
+++ b/apps/web/src/components/ui/encrypt-text.tsx
@@ -55,7 +55,7 @@ function EncryptText({
   }
 
   return (
-    <motion.button
+    <motion.div
       className="group relative w-full overflow-hidden text-white/60 transition-colors hover:text-white"
       onMouseEnter={scramble}
       onMouseLeave={stopScramble}
@@ -64,10 +64,10 @@ function EncryptText({
       <span className="invisible absolute" ref={textRef}>
         {TARGET_TEXT}
       </span>
-      <div className="relative z-10 flex items-center gap-2">
+      <motion.button className="relative z-10 flex items-center gap-2">
         <span className="flex whitespace-nowrap">{text}</span>
-      </div>
-    </motion.button>
+      </motion.button>
+    </motion.div>
   )
 }
 

From 3da6c7fd123233c651885730247ba6ee156d4fe1 Mon Sep 17 00:00:00 2001
From: Aleesssino <alesg3a1b4o1@gmail.com>
Date: Thu, 13 Jun 2024 16:16:35 +0200
Subject: [PATCH 5/5] fix(web): resolve encryption glitch in footer text

---
 apps/web/src/components/ui/encrypt-text.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/ui/encrypt-text.tsx b/apps/web/src/components/ui/encrypt-text.tsx
index d35d590e..5cc10a96 100644
--- a/apps/web/src/components/ui/encrypt-text.tsx
+++ b/apps/web/src/components/ui/encrypt-text.tsx
@@ -64,7 +64,10 @@ function EncryptText({
       <span className="invisible absolute" ref={textRef}>
         {TARGET_TEXT}
       </span>
-      <motion.button className="relative z-10 flex items-center gap-2">
+      <motion.button
+        className="relative z-10 flex items-center gap-2"
+        role="link"
+      >
         <span className="flex whitespace-nowrap">{text}</span>
       </motion.button>
     </motion.div>