@alphacifer/slidev-addon-theme 0.0.9 → 0.0.11

package/components/comparisons/arc-comparison/ArcComparison.vue

@@ -4,6 +4,7 @@ import {
   computed,
   Fragment,
   inject,
+  onBeforeUnmount,
   provide,
   type Ref,
   ref,
@@ -15,7 +16,7 @@ import {
 import {
   ARC_COMPARISON_ROOT_KEY,
   createArcComparisonGeometry,
-} from '../../../utils/arcComparison';
+} from '../../../utils/comparisons/arc-comparison';
 import { useDiagramAutoScale } from '../../../utils/useDiagramAutoScale';
 import { useMergedUnoAttrs } from '../../../utils/useMergedUnoAttrs';
 import ArcComparisonLeft from './ArcComparisonLeft.vue';
@@ -34,6 +35,7 @@ export interface IArcComparisonProps {
   readonly edgeOffset?: number;
   readonly vsText?: string;
   readonly vsSize?: number;
+  readonly vsBorderRotation?: number;
   readonly count?: number;
   readonly hubRadius?: number;
   readonly arcRadius?: number;
@@ -54,6 +56,7 @@ const props = withDefaults(defineProps<IArcComparisonProps>(), {
   edgeOffset: 30,
   vsText: 'Vs',
   vsSize: 14,
+  vsBorderRotation: 30,
   count: undefined,
   hubRadius: undefined,
   arcRadius: undefined,
@@ -178,6 +181,12 @@ const geo = computed(() => {
 let clipInstanceCounter = 0;
 const clipId = `alpha-arc-canvas-clip-${++clipInstanceCounter}`;
 
+let vsGradientInstanceCounter = 0;
+const vsGradientId = `alpha-arc-vs-gradient-${++vsGradientInstanceCounter}`;
+
+let vsTextGradientInstanceCounter = 0;
+const vsTextGradientId = `alpha-arc-vs-text-gradient-${++vsTextGradientInstanceCounter}`;
+
 const internalMoved = ref(false);
 
 const isMoved = computed(() => {
@@ -192,11 +201,41 @@ const isMoved = computed(() => {
   return internalMoved.value;
 });
 
+const bordersRenderKey = ref(0);
+const isReturningToFirstStep = ref(false);
+let returnTimer: ReturnType<typeof setTimeout> | undefined;
+
+onBeforeUnmount(() => {
+  if (returnTimer) {
+    clearTimeout(returnTimer);
+  }
+});
+
+watch(isMoved, (newMoved) => {
+  if (returnTimer) {
+    clearTimeout(returnTimer);
+    returnTimer = undefined;
+  }
+
+  if (props.as === 'layout') {
+    if (newMoved) {
+      isReturningToFirstStep.value = false;
+    } else {
+      isReturningToFirstStep.value = true;
+      returnTimer = setTimeout(() => {
+        isReturningToFirstStep.value = false;
+        bordersRenderKey.value++;
+      }, 650);
+    }
+  }
+});
+
 watch(
   () => props.as,
   (newAs) => {
     if (newAs === 'layout') {
       internalMoved.value = false;
+      isReturningToFirstStep.value = false;
     }
   },
 );
@@ -226,6 +265,7 @@ const leftHubMoverStyle = computed(() => {
   if (props.as === 'layout' && !isMoved.value) {
     return { transform: 'translateX(0px)' };
   }
+
   return { transform: `translateX(${leftTranslateX.value})` };
 });
 
@@ -233,6 +273,7 @@ const rightHubMoverStyle = computed(() => {
   if (props.as === 'layout' && !isMoved.value) {
     return { transform: 'translateX(0px)' };
   }
+
   return { transform: `translateX(${rightTranslateX.value})` };
 });
 
@@ -258,6 +299,120 @@ const dividerStyle = computed(() => {
   };
 });
 
+const resolvedVsBorderRotation = computed(() => props.vsBorderRotation ?? 30);
+
+const resolvedLeftColor = computed(() => {
+  for (const node of defaultNodes.value) {
+    const type = node.type as Record<string, unknown> | undefined;
+    const name = (type?.name ?? type?.__name) as string | undefined;
+    if (name === 'ArcComparisonLeft' && typeof node.props?.color === 'string') {
+      return node.props.color;
+    }
+  }
+
+  return 'var(--alpha-arc-comparison-left-accent)';
+});
+
+const resolvedRightColor = computed(() => {
+  for (const node of defaultNodes.value) {
+    const type = node.type as Record<string, unknown> | undefined;
+    const name = (type?.name ?? type?.__name) as string | undefined;
+    if (
+      name === 'ArcComparisonRight' &&
+      typeof node.props?.color === 'string'
+    ) {
+      return node.props.color;
+    }
+  }
+
+  return 'var(--alpha-arc-comparison-right-accent)';
+});
+
+const vsMixedColor = computed(() => {
+  return `color-mix(in srgb, ${resolvedLeftColor.value} 50%, ${resolvedRightColor.value} 50%)`;
+});
+
+const leftHubLinePath = computed(() => {
+  if (props.as !== 'layout') {
+    return undefined;
+  }
+
+  const { centerX, centerY, vsRadius, left } = geo.value;
+  return `M ${centerX} ${centerY - vsRadius} L ${centerX} ${centerY - left.hubRadius}`;
+});
+
+const rightHubLinePath = computed(() => {
+  if (props.as !== 'layout') {
+    return undefined;
+  }
+
+  const { centerX, centerY, vsRadius, right } = geo.value;
+  return `M ${centerX} ${centerY + vsRadius} L ${centerX} ${centerY + right.hubRadius}`;
+});
+
+const leftHubBorderPath = computed(() => {
+  if (props.as !== 'layout') {
+    return undefined;
+  }
+
+  const { centerX, centerY, left } = geo.value;
+  return `M ${centerX} ${centerY - left.hubRadius} A ${left.hubRadius} ${left.hubRadius} 0 0 0 ${centerX} ${centerY + left.hubRadius}`;
+});
+
+const rightHubBorderPath = computed(() => {
+  if (props.as !== 'layout') {
+    return undefined;
+  }
+
+  const { centerX, centerY, right } = geo.value;
+  return `M ${centerX} ${centerY + right.hubRadius} A ${right.hubRadius} ${right.hubRadius} 0 0 0 ${centerX} ${centerY - right.hubRadius}`;
+});
+
+const layoutBordersStyle = computed(() => {
+  if (props.as !== 'layout') {
+    return undefined;
+  }
+
+  return {
+    transitionDuration: '200ms',
+    transitionDelay: '0ms',
+  };
+});
+
+const vsTextStops = computed(() => {
+  const text = props.vsText || 'Vs';
+  const len = Math.max(1, text.length);
+  const stops: Array<{ offset: string; color: string }> = [];
+
+  for (let i = 0; i < len; i++) {
+    const start = (i / len) * 100;
+    const mid1 = ((i + 0.35) / len) * 100;
+    const center = ((i + 0.5) / len) * 100;
+    const mid2 = ((i + 0.65) / len) * 100;
+    const end = ((i + 1) / len) * 100;
+
+    stops.push({
+      offset: `${start.toFixed(1)}%`,
+      color: resolvedLeftColor.value,
+    });
+    stops.push({
+      offset: `${mid1.toFixed(1)}%`,
+      color: resolvedLeftColor.value,
+    });
+    stops.push({ offset: `${center.toFixed(1)}%`, color: vsMixedColor.value });
+    stops.push({
+      offset: `${mid2.toFixed(1)}%`,
+      color: resolvedRightColor.value,
+    });
+    stops.push({
+      offset: `${end.toFixed(1)}%`,
+      color: resolvedRightColor.value,
+    });
+  }
+
+  return stops;
+});
+
 provide(ARC_COMPARISON_ROOT_KEY, {
   animation: isAnimated,
   startDelay: resolvedStartDelay,
@@ -301,12 +456,13 @@ const resolvedHeightStyle = computed(() => {
 });
 
 const { className, forwardedAttrs } = useMergedUnoAttrs(
-  'alpha-arc-comparison w-full flex-1 flex flex-col items-center justify-center select-none font-sans relative min-h-0',
+  'alpha-arc-comparison w-full flex-1 flex flex-col items-center justify-center select-none font-sans relative min-h-0 bg-transparent border-0 p-0 m-0 appearance-none',
 );
 </script>
 
 <template>
-  <div
+  <button
+    type="button"
     ref="rootRef"
     v-bind="forwardedAttrs()"
     :class="[
@@ -321,16 +477,17 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     :style="{
       height: resolvedHeightStyle,
       cursor: props.as === 'layout' ? 'pointer' : undefined,
-      fontFamily:
-        'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
-      '--arc-comparison-start-delay': `${resolvedStartDelay}ms`,
-      '--arc-orbit-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-comparison-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-orbit-start-delay': `${resolvedStartDelay}ms`,
+      '--alpha-arc-orbit-heading': 'var(--alpha-arc-comparison-heading)',
+      '--alpha-arc-orbit-content': 'var(--alpha-arc-comparison-content)',
+      '--alpha-arc-orbit-badge': 'var(--alpha-arc-comparison-badge)',
     }"
     @click="handleClick"
   >
     <!-- Relative stage container -->
     <div
-      class="alpha-arc-comparison__stage relative w-[1000px] h-[480px] flex items-center justify-center overflow-visible flex-shrink-0"
+      class="alpha-arc-comparison__stage relative w-250 h-120 flex items-center justify-center overflow-visible shrink-0"
       :style="{
         transform: stageTransform,
         transformOrigin: 'center center',
@@ -338,6 +495,7 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
     >
       <!-- Base SVG Layer -->
       <svg
+        aria-hidden="true"
         class="alpha-arc-comparison__svg absolute inset-0 w-full h-full pointer-events-none overflow-visible"
         viewBox="0 0 1000 480"
         xmlns="http://www.w3.org/2000/svg"
@@ -346,6 +504,27 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
           <clipPath :id="clipId">
             <rect x="0" y="0" width="1000" height="480" />
           </clipPath>
+          <linearGradient :id="vsGradientId" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop offset="0%" :stop-color="resolvedLeftColor" />
+            <stop offset="35%" :stop-color="resolvedLeftColor" />
+            <stop offset="50%" :stop-color="vsMixedColor" />
+            <stop offset="65%" :stop-color="resolvedRightColor" />
+            <stop offset="100%" :stop-color="resolvedRightColor" />
+          </linearGradient>
+          <linearGradient
+            :id="vsTextGradientId"
+            x1="0%"
+            y1="0%"
+            x2="100%"
+            y2="0%"
+          >
+            <stop
+              v-for="(stop, sIdx) in vsTextStops"
+              :key="sIdx"
+              :offset="stop.offset"
+              :stop-color="stop.color"
+            />
+          </linearGradient>
         </defs>
         <!-- Semicircular Hubs Group with Canvas Clip -->
         <g :clip-path="`url(#${clipId})`">
@@ -362,8 +541,8 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <path
                 :d="geo.left.otherHubPath"
-                fill="#f1f3f6"
-                class="transition-colors duration-300 dark:fill-slate-800/80"
+                fill="var(--alpha-arc-comparison-hub-fill)"
+                class="transition-colors duration-300"
               />
             </g>
           </g>
@@ -379,8 +558,8 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <path
                 :d="geo.right.otherHubPath"
-                fill="#f1f3f6"
-                class="transition-colors duration-300 dark:fill-slate-800/80"
+                fill="var(--alpha-arc-comparison-hub-fill)"
+                class="transition-colors duration-300"
               />
             </g>
           </g>
@@ -396,8 +575,8 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <path
                 :d="geo.left.hubPath"
-                fill="#f1f3f6"
-                class="transition-colors duration-300 dark:fill-slate-800/80"
+                fill="var(--alpha-arc-comparison-hub-fill)"
+                class="transition-colors duration-300"
               />
             </g>
           </g>
@@ -413,12 +592,77 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
             >
               <path
                 :d="geo.right.hubPath"
-                fill="#f1f3f6"
-                class="transition-colors duration-300 dark:fill-slate-800/80"
+                fill="var(--alpha-arc-comparison-hub-fill)"
+                class="transition-colors duration-300"
               />
             </g>
           </g>
         </g>
+        <!-- Layout Mode Combined Drawing Paths (Middle Lines + Semicircle Borders) -->
+        <g
+          v-if="props.as === 'layout'"
+          :key="bordersRenderKey"
+          class="alpha-arc-comparison__layout-borders transition-opacity ease-out"
+          :class="{
+            'alpha-arc-comparison--animated': isAnimated,
+            'opacity-0 pointer-events-none': isMoved || isReturningToFirstStep,
+            'opacity-100': !isMoved && !isReturningToFirstStep,
+          }"
+          :style="layoutBordersStyle"
+        >
+          <!-- Middle Lines: Drawn first from the Vs badge outwards -->
+          <path
+            v-if="leftHubLinePath"
+            :d="leftHubLinePath"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedLeftColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__hub-line alpha-arc-comparison__hub-line--left"
+          />
+          <path
+            v-if="rightHubLinePath"
+            :d="rightHubLinePath"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedRightColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__hub-line alpha-arc-comparison__hub-line--right"
+          />
+          <!-- Semicircular Perimeter Borders: Drawn second around the arcs -->
+          <path
+            v-if="leftHubBorderPath"
+            :d="leftHubBorderPath"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedLeftColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__hub-border alpha-arc-comparison__hub-border--left"
+          />
+          <path
+            v-if="rightHubBorderPath"
+            :d="rightHubBorderPath"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedRightColor"
+            stroke-width="1.5"
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__hub-border alpha-arc-comparison__hub-border--right"
+          />
+        </g>
         <!-- Left Arc Guide Line and End Dots -->
         <g
           v-if="props.as !== 'layout' || isMoved"
@@ -436,23 +680,21 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
           <path
             :d="geo.left.arcPath"
             fill="none"
-            stroke="#cbd5e1"
+            stroke="var(--alpha-arc-comparison-guide-stroke)"
             stroke-width="1.5"
-            class="transition-colors duration-300 dark:stroke-slate-700"
+            class="transition-colors duration-300"
           />
           <circle
             :cx="geo.left.topDot.x"
             :cy="geo.left.topDot.y"
             :r="geo.left.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-comparison-guide-dot)"
           />
           <circle
             :cx="geo.left.bottomDot.x"
             :cy="geo.left.bottomDot.y"
             :r="geo.left.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-comparison-guide-dot)"
           />
         </g>
         <!-- Right Arc Guide Line and End Dots -->
@@ -472,66 +714,93 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
           <path
             :d="geo.right.arcPath"
             fill="none"
-            stroke="#cbd5e1"
+            stroke="var(--alpha-arc-comparison-guide-stroke)"
             stroke-width="1.5"
-            class="transition-colors duration-300 dark:stroke-slate-700"
+            class="transition-colors duration-300"
           />
           <circle
             :cx="geo.right.topDot.x"
             :cy="geo.right.topDot.y"
             :r="geo.right.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-comparison-guide-dot)"
           />
           <circle
             :cx="geo.right.bottomDot.x"
             :cy="geo.right.bottomDot.y"
             :r="geo.right.dotRadius"
-            fill="#94a3b8"
-            class="dark:fill-slate-600"
+            fill="var(--alpha-arc-comparison-guide-dot)"
           />
         </g>
-        <!-- Center Divider Line -->
-        <line
-          class="alpha-arc-comparison__divider transition-colors duration-300 dark:stroke-slate-700"
+        <!-- Center Divider Line (Top: Left Color, Bottom: Right Color) -->
+        <g
+          v-if="props.as !== 'layout' || isMoved"
+          class="alpha-arc-comparison__divider transition-colors duration-300"
           :class="{
             'alpha-arc-comparison--animated': isAnimated,
             'alpha-arc-comparison__divider--layout': props.as === 'layout',
+            'opacity-0 pointer-events-none': props.as === 'layout' && !isMoved,
+            'opacity-100': props.as !== 'layout' || isMoved,
           }"
           :style="dividerStyle"
-          :x1="geo.dividerLine.x"
-          :y1="geo.dividerLine.y1"
-          :x2="geo.dividerLine.x"
-          :y2="geo.dividerLine.y2"
-          stroke="#cbd5e1"
-          stroke-width="1.5"
-        />
-        <!-- Center "Vs" Circle Badge -->
-        <g
-          class="alpha-arc-comparison__vs"
-          :class="{ 'alpha-arc-comparison--animated': isAnimated }"
         >
+          <path
+            :d="`M ${geo.dividerLine.x} ${geo.centerY - geo.vsRadius} L ${geo.dividerLine.x} ${geo.dividerLine.y1}`"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedLeftColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__divider-line alpha-arc-comparison__divider-line--top transition-colors duration-300"
+          />
+          <path
+            :d="`M ${geo.dividerLine.x} ${geo.centerY + geo.vsRadius} L ${geo.dividerLine.x} ${geo.dividerLine.y2}`"
+            pathLength="100"
+            stroke-dasharray="100"
+            :stroke-dashoffset="isAnimated ? 100 : 0"
+            fill="none"
+            :stroke="resolvedRightColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            class="alpha-arc-comparison__divider-line alpha-arc-comparison__divider-line--bottom transition-colors duration-300"
+          />
+        </g>
+        <!-- Center "Vs" Circle Badge -->
+        <g class="alpha-arc-comparison__vs">
           <circle
             :cx="geo.vsCenter.x"
             :cy="geo.vsCenter.y"
             :r="geo.vsRadius"
-            fill="#ffffff"
-            stroke="#cbd5e1"
-            stroke-width="2"
-            class="transition-colors duration-300 dark:fill-slate-100 dark:stroke-slate-300"
-            style="filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.22));"
+            fill="var(--alpha-arc-comparison-vs-bg)"
+            class="transition-colors duration-300"
+            style="filter: var(--alpha-arc-comparison-vs-shadow);"
           />
+          <!-- Rotated Split Border with Mixed Boundary Gradient -->
+          <g
+            :transform="`rotate(${resolvedVsBorderRotation}, ${geo.vsCenter.x}, ${geo.vsCenter.y})`"
+          >
+            <circle
+              class="alpha-arc-comparison__vs-border alpha-arc-comparison__vs-border--left alpha-arc-comparison__vs-border--right transition-colors duration-300"
+              :cx="geo.vsCenter.x"
+              :cy="geo.vsCenter.y"
+              :r="geo.vsRadius"
+              fill="none"
+              :stroke="`url(#${vsGradientId})`"
+              stroke-width="2"
+            />
+          </g>
           <text
             :x="geo.vsCenter.x"
             :y="geo.vsCenter.y"
             text-anchor="middle"
             dominant-baseline="central"
             font-weight="700"
+            font-style="italic"
             :font-size="props.vsSize"
-            fill="#0f172a"
+            :fill="`url(#${vsTextGradientId})`"
             letter-spacing="-0.01em"
-            class="dark:fill-slate-900 select-none pointer-events-none"
-            style="font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;"
+            class="font-sans italic select-none pointer-events-none"
           >
             {{ props.vsText }}
           </text>
@@ -546,61 +815,73 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
         <ArcComparisonRight :count="resolvedCount" />
       </template>
     </div>
-  </div>
+  </button>
 </template>
 
 <style scoped>
 /* Animated Transitions */
-.alpha-arc-comparison--animated.alpha-arc-comparison__divider:not(.alpha-arc-comparison__divider--layout) {
-  animation: arc-divider-in 500ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-comparison-start-delay, 0ms) + 50ms) both;
-  transform-origin: 500px 240px;
-  transform-box: view-box;
+.alpha-arc-comparison--animated .alpha-arc-comparison__divider-line--top,
+.alpha-arc-comparison--animated .alpha-arc-comparison__divider-line--bottom {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: alpha-arc-draw-line 600ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 40ms) both;
+}
+
+.alpha-arc-comparison--animated .alpha-arc-comparison__hub-line--left,
+.alpha-arc-comparison--animated .alpha-arc-comparison__hub-line--right {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: alpha-arc-draw-line 300ms cubic-bezier(0.2, 0.8, 0.4, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 40ms) both;
 }
 
-.alpha-arc-comparison--animated.alpha-arc-comparison__divider--layout {
-  animation: arc-line-fade 500ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-comparison-start-delay, 0ms) + 50ms) both;
+.alpha-arc-comparison--animated .alpha-arc-comparison__hub-border--left,
+.alpha-arc-comparison--animated .alpha-arc-comparison__hub-border--right {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 100;
+  animation: alpha-arc-draw-continuous 550ms cubic-bezier(0.25, 1, 0.5, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 260ms) both;
 }
 
 .alpha-arc-comparison__divider--layout {
   transform-box: view-box;
-  transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
+  transition:
+    transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 500ms ease-out;
 }
 
 .alpha-arc-comparison--animated.alpha-arc-comparison__hub--left {
-  animation: arc-hub-left-in 550ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-comparison-start-delay, 0ms) + 30ms) both;
+  animation: arc-hub-left-in 550ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 30ms) both;
 }
 
 .alpha-arc-comparison--animated.alpha-arc-comparison__hub--right {
-  animation: arc-hub-right-in 550ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-comparison-start-delay, 0ms) + 30ms) both;
+  animation: arc-hub-right-in 550ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 30ms) both;
 }
 
 .alpha-arc-comparison--animated.alpha-arc-comparison__arc--left,
 .alpha-arc-comparison--animated.alpha-arc-comparison__arc--right {
-  animation: arc-line-fade 500ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--arc-comparison-start-delay, 0ms) + 100ms) both;
+  animation: arc-line-fade 500ms cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--alpha-arc-comparison-start-delay, 0ms) + 100ms) both;
 }
 
-.alpha-arc-comparison--animated.alpha-arc-comparison__vs {
-  animation: arc-vs-bounce 550ms cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--arc-comparison-start-delay, 0ms) + 220ms) both;
-  transform-origin: 500px 240px;
-  transform-box: view-box;
-}
-
-@keyframes arc-divider-in {
+@keyframes arc-hub-left-in {
   0% {
     opacity: 0;
-    transform: scaleY(0);
-    transform-origin: center;
+    transform: translateX(-40px);
   }
   100% {
     opacity: 1;
-    transform: scaleY(1);
+    transform: translateX(0);
   }
 }
 
-@keyframes arc-hub-left-in {
+@keyframes arc-hub-right-in {
   0% {
     opacity: 0;
-    transform: translateX(-40px);
+    transform: translateX(40px);
   }
   100% {
     opacity: 1;
@@ -608,34 +889,49 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   }
 }
 
-@keyframes arc-hub-right-in {
+@keyframes arc-line-fade {
   0% {
     opacity: 0;
-    transform: translateX(40px);
   }
   100% {
     opacity: 1;
-    transform: translateX(0);
   }
 }
 
-@keyframes arc-line-fade {
+@keyframes alpha-arc-draw-continuous {
   0% {
+    stroke-dashoffset: 100;
     opacity: 0;
   }
+  1% {
+    opacity: 1;
+  }
   100% {
+    stroke-dashoffset: 0;
     opacity: 1;
   }
 }
 
-@keyframes arc-vs-bounce {
+@keyframes alpha-arc-draw-line {
   0% {
+    stroke-dashoffset: 100;
     opacity: 0;
-    transform: scale(0.4);
+  }
+  1% {
+    opacity: 1;
   }
   100% {
+    stroke-dashoffset: 0;
     opacity: 1;
-    transform: scale(1);
+  }
+}
+
+@keyframes alpha-arc-draw-arc {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
   }
 }