"WeAreText" animation WIP

src/App.svelte

@@ -66,8 +66,8 @@
       </div>
     </StickyLayer>
 
-    <StickyLayer class="align-center" offset={{ top: 0, bottom: 5.125 }}>
+    <StickyLayer class="align-center" offset={{ top: 0, bottom: 5.125 }} let:progress>
-      <WeAreText/>
+      <WeAreText containerProgress={progress}/>
     </StickyLayer>
   </Parallax>
 </main>

src/lib/Universal/ZUtilities.js

@@ -0,0 +1,57 @@
+/**
+ * Re-maps a number from one range to another.
+ *
+ * This function behaves similarly to the Arduino `map` function. It takes a number defined 
+ * within a certain range (inclusive) and maps it to a new number within a different range
+ * (also inclusive). Optionally, the function can allow the output to exceed the mapped range.
+ * The function is especially useful for adapting sensor values or other input data to a specific scale.
+ *
+ * @param {number} x - The number to re-map. Expected to be within the range of in_min to in_max (inclusive).
+ * @param {number} in_min - The lower bound of the current range of x (inclusive).
+ * @param {number} in_max - The upper bound of the current range of x (inclusive).
+ * @param {number} out_min - The lower bound of the target range (inclusive).
+ * @param {number} out_max - The upper bound of the target range (inclusive).
+ * @param {boolean} [allowExceed=false] - Optional. If true, allows the output to exceed the specified range.
+ * @return {number} The re-mapped number. Constrained within out_min and out_max if allowExceed is false.
+ *
+ * @example
+ * // Map a sensor value from a range of 0-1023 to a range of 0-100
+ * let sensorValue = 512;
+ * let mappedValue = map(sensorValue, 0, 1023, 0, 100);
+ * console.log(mappedValue); // Outputs: 50
+ *
+ * // Example where output exceeds the range
+ * mappedValue = map(sensorValue, 0, 1023, 0, 100, true);
+ * console.log(mappedValue); // Output may exceed 100 if sensorValue > 1023
+ */
+export function map(x, in_min, in_max, out_min, out_max, allowExceed = false) {
+    let mapped = (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+
+    if (!allowExceed) {
+        mapped = clamp(mapped, out_min, out_max);
+    }
+
+    return mapped;
+}
+
+
+/**
+ * Clamps a number between two inclusive bounds.
+ *
+ * This function forces a number to be within a specified range. If the number is less than
+ * the lower bound, the lower bound is returned. If the number is greater than the upper bound,
+ * the upper bound is returned. Otherwise, the original number is returned. Both the lower and
+ * upper bounds are inclusive.
+ *
+ * @param {number} value - The number to clamp.
+ * @param {number} minVal - The lower bound of the clamping range (inclusive).
+ * @param {number} maxVal - The upper bound of the clamping range (inclusive).
+ * @return {number} The clamped value.
+ *
+ * @example
+ * console.log(clamp(7, 1, 5)); // Outputs: 5
+ * console.log(clamp(2, 1, 5)); // Outputs: 2
+ */
+function clamp(value, minVal, maxVal) {
+    return Math.max(minVal, Math.min(maxVal, value));
+}

src/lib/WeAreText.svelte

@@ -1,22 +1,84 @@
 <script lang="ts">
     import ZSpacer from "./Universal/ZSpacer.svelte";
+    import {map} from "./Universal/ZUtilities.js";
+
+    // Hyperparams
+    let startFadeIn: number = 0.85;
+    let finishFadeIn: number = 0.9;
+    
+    export let containerProgress: number = 0;
+
+    let textDiv: Element = document.getElementById("WeAreText");
+    let shine: boolean = false;
+
+    let backgroundTime: number = 0;
+
+    $: backgroundTime = map(containerProgress, startFadeIn, finishFadeIn, 0, 1); 
+    
+    $:{
+        if (!!textDiv){
+            console.log(backgroundTime);
+            if (containerProgress >= 0.995){
+                shine = true;
+            }
+            else {
+                shine = false;
+            }
+        }
+        else {
+            textDiv = document.getElementById("WeAreText");
+        }
+    }
 </script>
 
 <div>
     <div class="align-center" style="margin-right: 35vw; position: relative;">
-        <div id="WeAreText" class="no-wrap no-interact"
+        <div id="WeAreText" class="no-wrap no-interact shine" class:animate={shine}
-        style="color: #ffffff; position: absolute;">
+        style="position: absolute; background: rgba(94, 186, 242, {backgroundTime})">
             We are
         </div>
     </div>
 </div>
 
 <style>
+@import "./WeAreText.svelte.css";
+
     #WeAreText {
         font-family: 'CozetteVector';
         font-size: 7.5vw;
         text-align: end;
 
         margin-right: 15vw;
+        line-height: 6vw;
+        padding: 1vw;
+        padding-bottom: 0.1vw;
+
+        border-radius: 1vw;
+    }
+
+    .shine {
+        display: block;
+        position: relative;
+        margin: 50px auto 0;
+        padding: 10px 0;
+        color: #fff;
+        text-align: center;
+        text-transform: uppercase;
+        border: none;
+    }
+    .shine:after {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 0;
+        height: 100%;
+        background-color: rgba(255,255,255,0.4);
+        transition: none;
+    }   
+    .shine.animate:after {
+        width: 120%;
+        background-color: rgba(255,255,255,0);
+        transition: all 0.4s ease-in-out;
     }
 </style>

src/lib/WeAreText.svelte.css

@@ -0,0 +1,8 @@
+.shine:after {
+  width: 120%;
+  background-color: rgba(255,255,255,0);
+  
+  -webkit-transition: all 0.4s ease-in-out;
+     -moz-transition: all 0.4s ease-in-out;
+          transition: all 0.4s ease-in-out;
+}