Merge pull request #107 from PEC-CSS/enhancement/breathing-banner

PEC-CSS · Nov 4, 2023 · 7916134 · 7916134
2 parents 65e7026 + 2509ccb
commit 7916134
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 9 deletions.
diff --git a/components/banner/Banner.tsx b/components/banner/Banner.tsx
@@ -9,11 +9,14 @@ export default function Banner({heading, color=Common.primaryColor}: {heading?:
     const router = useRouter();
 
     useEffect(()=> {
-        setMatrix(getArray())
-    }, [router.pathname])
+        setTimeout ( () => {
+            setMatrix(getArray())
+        },
+        1000)    
+    })
 
     function getArray() {
-        let matrix = new Array<Array<number>>(8);
+        let matrix = new Array<Array<number>>(9);
         for (let i = 0; i < matrix.length; i++) {
             matrix[i] = new Array<number>(200); // kind of infinity when it comes to screens (15 x 200px = 3000px)
             for (let j = 0; j < matrix[i].length; j++) {
@@ -24,13 +27,19 @@ export default function Banner({heading, color=Common.primaryColor}: {heading?:
         // generate opacity : can be improved
         for (let i = 0; i < matrix.length; i++) {
             for (let j = 0; j < matrix[0].length; j++) {
-                matrix[i][j] = Math.random()*0.3;
-                if(i>3) {
-                    matrix[i][j] = Math.random()*0.2;
+                matrix[i][j] = Math.random()*0.6;
+                if(i>2) {
+                    matrix[i][j] = Math.random()*0.4;
                 }
-                if(i>5) {
+                if (i>4) {
+                    matrix[i][j] = Math.random()*0.2
+                }
+                if(i>6) {
                     matrix[i][j] = Math.random()*0.1;
                 }
+                if(i>7) {
+                    matrix[i][j] = Math.random()*0.05;
+                }
             }
         }
         return matrix;

diff --git a/styles/components/Banner.module.scss b/styles/components/Banner.module.scss
@@ -18,14 +18,14 @@
     border-radius: 4px;
     flex: 0 0 auto;
     background-color: transparent;
-    transition: all ease-in .5s;
+    transition: all ease-in 1s;
   }
 
   h3 {
     position: absolute;
     top: 95px;
     font-size: 36px;
-      width: 100%;
+    width: 100%;
     margin-left: 50%;
     translate: -50% 0;
     text-align: center;