add: footer glitch effect

lugvitc · Jan 4, 2025 · 3beb0c3 · 3beb0c3
1 parent a6d2913
commit 3beb0c3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/src/components/footer.jsx b/src/components/footer.jsx
@@ -66,7 +66,7 @@ export default function Footer() {
             </div>
             <div className="line w-full my-4"></div>
             <p className="text-big-phone-xl font-calcio text-white responsive-text lg:text-big-desktop-xl">
-                <AnimatedText text="ENIGMA" />
+                <AnimatedText text="ENIGMA" time={2} customText='▂▄▆█' preStyle='text-enigma-green'/>
             </p>
         </footer>
     );

diff --git a/src/components/text.jsx b/src/components/text.jsx
@@ -1,14 +1,18 @@
 import React, { useState, useRef } from 'react';
 
-const AnimatedText = ({ text, className = '', customText = '' }) => {
+const AnimatedText = ({ text, className = '', customText = '', time = 1, preStyle = '' }) => {
   const [animatedTitle, setAnimatedTitle] = useState(text || '');
   const intervalRef = useRef(null);
+  const [isHovered, setIsHovered] = useState(false);
+
+  const finalClass = isHovered ? preStyle : className;
 
   // Emojis work too :))
   const letters = customText === '' ? 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' : customText;
 
   const handleMouseOver = () => {
     let iteration = 0;
+    setIsHovered(true);
 
     function animateText() {
       intervalRef.current = setInterval(() => {
@@ -20,10 +24,10 @@ const AnimatedText = ({ text, className = '', customText = '' }) => {
               : letters[Math.floor(Math.random() * letters.length)];
           })
           .join('');
-
+        
         setAnimatedTitle(randomText);
 
-        iteration += 0.5;
+        iteration += 0.5/time;
 
         if (iteration >= text.length) {
           clearInterval(intervalRef.current);
@@ -36,13 +40,14 @@ const AnimatedText = ({ text, className = '', customText = '' }) => {
   };
 
   const handleMouseOut = () => {
+    setIsHovered(false);
     clearInterval(intervalRef.current);
     setAnimatedTitle(text);
   };
 
   return (
       <div>
-        <p className={`${className} inline`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
+        <p className={`${finalClass} inline`} onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
           {animatedTitle}
         </p>
       </div>