(v0.1.6-alpha) Glitch Effect

Added a glitch kinda effect on hovering over the cipher title :) Thanks Hyperplexed for guiding lol

Author: rupnil-codes

CHANGELOG.md

@@ -4,5 +4,6 @@
 - [ ] Fix logo and make it PERFECT.
 - [ ] When the user presses enter it may remove all the text (typewriter) and then do something.
 - [ ] FIX: the logo in the navbar.
+- [ ] When switching different tabs it should have a swoosh (slide left) animation or side rigth if reverse
 
 ## CHANGELOGS:

DESIGN.md

@@ -0,0 +1,3 @@
+
+the cipher text could literally be a cipher
+which is revealed on hover

src/routes/landing.jsx

@@ -1,11 +1,47 @@
 import "../styles/routes/landing.css";
+import {useState} from "react";
 
 function Landing() {
+    const DEFAULT_TITLE = "C1PHΣR"
+    const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+    const [title, setTitle] = useState("C1PHΣR");
+
+    const glitchEffect  = () => {
+        let iterations = 0;
+
+        const interval = setInterval(() => {
+            setTitle(
+                title.split("")
+                    .map((letter, index) => {
+                        if (index < iterations) {
+                            return DEFAULT_TITLE[index];
+                        }
+
+                        return letters[Math.floor(Math.random() * 26)]
+                    })
+                    .join("")
+            );
+
+            if (iterations >= DEFAULT_TITLE.length) clearInterval(interval);
+
+            iterations += 1/3;
+        }, 30);
+
+    };
 
     return (
         <>
             <div className={"landing"}>
-                <h1 className={"header-font"}>C1PH<span className={"sigma-font"}>Σ</span>R</h1>
+                <h1
+                    className={"header-font"}
+                    onMouseOver={glitchEffect}
+                >
+                    {title.split("").map((char, i) =>
+                        char === "Σ"
+                            ? <span key={i} className="sigma-font">Σ</span>
+                            : char
+                    )}
+                </h1>
                 <h2>
                     press
                     <span className={"enter"}> ENTER </span>

src/styles/routes/landing.css

@@ -10,8 +10,8 @@
 }
 
 .landing h1 {
+    height: 5rem;
     font-size: 7rem;
-    margin: -1.75rem;
 }
 
 .landing h2 {