fix beam animation direction bug

Author: gchartier

package.json

@@ -1,6 +1,6 @@
 {
     "name": "orcfax.io",
-    "version": "0.0.2",
+    "version": "2025-05-20",
     "private": true,
     "scripts": {
         "dev": "vite dev",

src/lib/components/AnimatedBeam.svelte

@@ -3,43 +3,48 @@
     import { onMount, tick } from "svelte";
     import { motion } from "$lib/actions/motion.svelte";
 
-    let className: any = "";
-    export { className as class };
-    export let containerRef;
-    export let fromRef;
-    export let toRef;
-    export let curvature = 0;
-    export let reverse = false; // Include the reverse pro;
-    export let duration = Math.random() * 3 + 4;
-    export let delay = 0;
-    export let pathColor = "gray";
-    export let pathWidth = 2;
-    export let pathOpacity = 0.2;
-    export let gradientStartColor = "#A3C7C4";
-    export let gradientStopColor = "#52817e";
-    export let startXOffset = 0;
-    export let startYOffset = 0;
-    export let endXOffset = 0;
-    export let endYOffset = 0;
+    // Props using $props rune
+    const {
+        class: className = "",
+        containerRef = $bindable(),
+        fromRef = $bindable(),
+        toRef = $bindable(),
+        curvature = 0,
+        reverse = false,
+        duration = Math.random() * 3 + 4,
+        delay = 0,
+        pathColor = "gray",
+        pathWidth = 2,
+        pathOpacity = 0.2,
+        gradientStartColor = "#A3C7C4",
+        gradientStopColor = "#52817e",
+        startXOffset = 0,
+        startYOffset = 0,
+        endXOffset = 0,
+        endYOffset = 0,
+    } = $props();
 
-    let id = crypto.randomUUID().slice(0, 8);
-    let pathD = "";
-    let svgDimensions = { width: 0, height: 0 };
+    // State using $state rune
+    let id = $state(crypto.randomUUID().slice(0, 8));
+    let pathD = $state("");
+    let svgDimensions = $state({ width: 0, height: 0 });
 
-    // Calculate the gradient coordinates based on the reverse prop
-    let gradientCoordinates = reverse
-        ? {
-              x1: ["90%", "-10%"],
-              x2: ["100%", "0%"],
-              y1: ["0%", "0%"],
-              y2: ["0%", "0%"],
-          }
-        : {
-              x1: ["10%", "110%"],
-              x2: ["0%", "100%"],
-              y1: ["0%", "0%"],
-              y2: ["0%", "0%"],
-          };
+    // Derived values using $derived rune
+    const gradientCoordinates = $derived(
+        reverse
+            ? {
+                  x1: ["90%", "-10%"],
+                  x2: ["100%", "0%"],
+                  y1: ["0%", "0%"],
+                  y2: ["0%", "0%"],
+              }
+            : {
+                  x1: ["10%", "110%"],
+                  x2: ["0%", "100%"],
+                  y1: ["0%", "0%"],
+                  y2: ["0%", "0%"],
+              }
+    );
 
     let updatePath = () => {
         let containerRect = containerRef?.getBoundingClientRect();
@@ -60,6 +65,7 @@
         let d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
         pathD = d;
     };
+
     onMount(async () => {
         await tick().then(() => {
             updatePath();

src/lib/components/WorkflowAnimation.svelte

@@ -19,6 +19,7 @@
 
     let size = $derived.by(() => {
         if (innerWidth <= 640) return "xs";
+        else return "lg";
     });
 
     // Refs for all circles
@@ -37,8 +38,8 @@
     let validate3Ref = $state<HTMLElement | SVGElement>();
     // Publish stage
     let publish1Ref = $state<HTMLElement | SVGElement>();
-    let publish2Ref = $state<HTMLElement | SVGElement>();
-    let publish3Ref = $state<HTMLElement | SVGElement>();
+    let publishCardanoRef = $state<HTMLElement | SVGElement>();
+    let publishArweaveRef = $state<HTMLElement | SVGElement>();
 
     let collect1Duration = $derived(size === "xs" ? 8 : 4);
     let collect2Duration = $derived(size === "xs" ? 8 : 4);
@@ -144,12 +145,20 @@
         </Circle>
         <div class="flex flex-row sm:flex-col justify-center gap-2 sm:gap-8">
             <Circle class="p-0 h-10 w-10 bg-blue-600">
-                <div bind:this={publish2Ref} class="tooltip tooltip-left" data-tip={"Cardano"}>
+                <div
+                    bind:this={publishCardanoRef}
+                    class="tooltip tooltip-left"
+                    data-tip={"Cardano"}
+                >
                     <CardanoLogo />
                 </div>
             </Circle>
             <Circle class="p-0 h-10 w-10 bg-white">
-                <div bind:this={publish3Ref} class="tooltip tooltip-left" data-tip={"Arweave"}>
+                <div
+                    bind:this={publishArweaveRef}
+                    class="tooltip tooltip-left"
+                    data-tip={"Arweave"}
+                >
                     <ArweaveLogo />
                 </div>
             </Circle>
@@ -223,15 +232,15 @@
     <AnimatedBeam
         bind:containerRef
         bind:fromRef={publish1Ref}
-        bind:toRef={publish2Ref}
+        bind:toRef={publishCardanoRef}
         duration={publish1Duration}
         delay={4.5}
         reverse={size === "xs" ? true : false}
     />
     <AnimatedBeam
         bind:containerRef
         bind:fromRef={publish1Ref}
-        bind:toRef={publish3Ref}
+        bind:toRef={publishArweaveRef}
         duration={publish1Duration}
         delay={4.5}
     />