refactor(AnimatedBeam): support vertical beam

Author: hooray

components/content/inspira/examples/AnimatedBeamDemo3.vue

@@ -0,0 +1,43 @@
+<template>
+  <ClientOnly>
+    <div
+      ref="containerRef"
+      class="relative flex h-[500px] w-full items-center justify-center overflow-hidden rounded-lg border bg-background p-10 md:shadow-xl"
+    >
+      <div class="flex size-full flex-col items-center justify-between">
+        <div
+          ref="div1Ref"
+          class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
+        >
+          <Icon
+            name="logos:github-icon"
+            size="24"
+          />
+        </div>
+        <div
+          ref="div2Ref"
+          class="z-10 flex size-12 items-center justify-center rounded-full border-2 bg-white p-2 shadow-[0_0_20px_-12px_rgba(0,0,0,0.8)]"
+        >
+          <Icon
+            name="logos:google-drive"
+            size="24"
+          />
+        </div>
+      </div>
+
+      <AnimatedBeam
+        :container-ref="containerRef"
+        :from-ref="div1Ref"
+        :to-ref="div2Ref"
+      />
+    </div>
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+const containerRef = ref(null);
+const div1Ref = ref(null);
+const div2Ref = ref(null);
+</script>

components/content/inspira/ui/animated-beam/AnimatedBeam.vue

@@ -45,6 +45,7 @@
           stop-opacity="0"
         />
         <animate
+          v-if="!isVertical"
           attributeName="x1"
           :values="x1"
           :dur="`${duration}s`"
@@ -54,6 +55,7 @@
           repeatCount="indefinite"
         />
         <animate
+          v-if="!isVertical"
           attributeName="x2"
           :values="x2"
           :dur="`${duration}s`"
@@ -62,6 +64,26 @@
           calcMode="spline"
           repeatCount="indefinite"
         />
+        <animate
+          v-if="isVertical"
+          attributeName="y1"
+          :values="y1"
+          :dur="`${duration}s`"
+          keyTimes="0; 1"
+          keySplines="0.16 1 0.3 1"
+          calcMode="spline"
+          repeatCount="indefinite"
+        />
+        <animate
+          v-if="isVertical"
+          attributeName="y2"
+          :values="y2"
+          :dur="`${duration}s`"
+          keyTimes="0; 1"
+          keySplines="0.16 1 0.3 1"
+          calcMode="spline"
+          repeatCount="indefinite"
+        />
       </linearGradient>
     </defs>
   </svg>
@@ -108,8 +130,11 @@ const props = withDefaults(defineProps<AnimatedBeamProps>(), {
 });
 
 const id = "beam-" + Math.random().toString(36).substring(2, 10);
+const isVertical = ref(false);
 const x1 = props.reverse ? "90%; -10%;" : "10%; 110%;";
 const x2 = props.reverse ? "100%; 0%;" : "0%; 100%;";
+const y1 = props.reverse ? "90%; -10%;" : "10%; 110%;";
+const y2 = props.reverse ? "100%; 0%;" : "0%; 100%;";
 
 const pathD = ref("");
 const svgDimensions = ref<{ width: number; height: number }>({
@@ -148,6 +173,9 @@ function updatePath() {
     const endX = rectB.left - containerRect.left + rectB.width / 2 + (props.endXOffset ?? 0);
     const endY = rectB.top - containerRect.top + rectB.height / 2 + (props.endYOffset ?? 0);
 
+    // Check if the light beam is in a vertical direction (the distance in the y-direction is greater than the distance in the x-direction).
+    isVertical.value = Math.abs(endY - startY) > Math.abs(endX - startX);
+
     const controlY = startY - (props.curvature ?? 0);
     const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
     pathD.value = d;

content/2.components/special-effects/animated-beam.md

@@ -29,6 +29,11 @@ Double-sided beam.
 ::ComponentLoader{label="Preview" componentName="AnimatedBeamDemo2" type="examples"}
 ::
 
+Vertical beam.
+
+::ComponentLoader{label="Preview" componentName="AnimatedBeamDemo3" type="examples"}
+::
+
 ## API
 
 | Prop Name            | Type          | Default                | Description                                                                  |