@alphacifer/slidev-addon-theme 0.0.9 → 0.0.10

package/components/pyramid/circular-pyramid/CircularPyramid.vue

@@ -775,6 +775,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                 ? `url(#${getActiveShadowId(layer.index)})`
                 : undefined
             "
+            :style="{
+              '--layer-order': layer.index,
+              '--layer-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${layer.index * 320 + 10}ms)`,
+            }"
             @click.stop="handleLayerClick(layer.index, $event)"
           >
             <!-- 1. 3D Cylindrical Rim (Mantle) -->
@@ -834,34 +838,17 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   filter: brightness(1.05);
 }
 
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--0 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 60ms) both;
-}
-
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--1 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 140ms) both;
-}
-
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--2 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 220ms) both;
-}
-
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--3 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 300ms) both;
-}
-
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--4 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 380ms) both;
-}
-
-.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer--5 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 460ms) both;
+.alpha-circular-pyramid--animated .alpha-circular-pyramid__layer {
+  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--layer-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 10ms)) both;
 }
 
 @keyframes alpha-pyramid-layer-enter {
   0% {
     opacity: 0;
-    transform: translateY(12px) scale(0.97);
+    transform: translateY(80px) scale(0.92);
+  }
+  25% {
+    opacity: 1;
   }
   100% {
     opacity: 1;

package/components/pyramid/circular-pyramid/CircularPyramidStack.vue

@@ -15,6 +15,7 @@ import {
   DEFAULT_CIRCULAR_PYRAMID_COLOR,
   DEFAULT_CIRCULAR_PYRAMID_STACK_COLORS,
 } from '../../../utils/pyramid/circular-pyramid';
+import { PYRAMID_DOT_GAP_PX } from '../../../utils/pyramid/shared';
 import CircularPyramidStackContent from './CircularPyramidStackContent.vue';
 import CircularPyramidStackTitle from './CircularPyramidStackTitle.vue';
 
@@ -158,7 +159,7 @@ const leftWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    return Math.max(180, Math.round(cx - rx - 40));
+    return Math.max(180, Math.round(cx - rx - PYRAMID_DOT_GAP_PX));
   }
   return DOT_POSITION_X;
 });
@@ -169,11 +170,11 @@ const rightWingWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    const dotRightX = cx + rx + 40;
+    const dotRightX = cx + rx + PYRAMID_DOT_GAP_PX;
     const containerW = 960;
     return Math.max(rightWidth.value + 20, Math.round(containerW - dotRightX));
   }
-  return rightWidth.value + 40;
+  return rightWidth.value + PYRAMID_DOT_GAP_PX;
 });
 
 const rightOffset = computed(
@@ -216,6 +217,10 @@ const connectorWidth = computed(() => {
   return Math.max(20, rightWingWidth.value - rightWidth.value);
 });
 
+const stepIndex = computed(() => {
+  return resolvedIndex.value;
+});
+
 provide(CIRCULAR_PYRAMID_STACK_KEY, {
   index: resolvedIndex,
   isActive,
@@ -252,6 +257,7 @@ provide(CIRCULAR_PYRAMID_STACK_KEY, {
         { 'alpha-circular-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
         width: `${leftWidth}px`,
         minWidth: `${leftWidth}px`,
         maxWidth: `${leftWidth}px`,
@@ -267,7 +273,7 @@ provide(CIRCULAR_PYRAMID_STACK_KEY, {
         :connector-width="props.connectorWidth"
       />
     </div>
-    <!-- Right Wing: Dot + Connector + Content Card (40px from slab) -->
+    <!-- Right Wing: Dot + Connector + Content Card (10px from slab) -->
     <div
       class="alpha-circular-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
       :class="[
@@ -275,6 +281,7 @@ provide(CIRCULAR_PYRAMID_STACK_KEY, {
         { 'alpha-circular-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
         width: `${rightWingWidth}px`,
         minWidth: `${rightWidth}px`,
         maxWidth: `${rightWingWidth}px`,
@@ -303,34 +310,14 @@ provide(CIRCULAR_PYRAMID_STACK_KEY, {
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--0 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 100ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--1 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 180ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--2 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 260ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--3 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 340ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--4 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 420ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__left--5 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 500ms) both;
+.alpha-circular-pyramid-stack--animated .alpha-circular-pyramid-stack__left {
+  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 460ms)) both;
 }
 
 @keyframes alpha-pyramid-left-in {
   0% {
     opacity: 0;
-    transform: translateX(-12px);
+    transform: translateX(-10px);
   }
   100% {
     opacity: 1;
@@ -338,34 +325,14 @@ provide(CIRCULAR_PYRAMID_STACK_KEY, {
   }
 }
 
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--0 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 120ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--1 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 200ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--2 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 280ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--3 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 360ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--4 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 440ms) both;
-}
-
-.alpha-circular-pyramid-stack--animated.alpha-circular-pyramid-stack__right--5 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--circular-pyramid-start-delay, 0ms) + 520ms) both;
+.alpha-circular-pyramid-stack--animated .alpha-circular-pyramid-stack__right {
+  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--circular-pyramid-start-delay, 0ms) + 470ms)) both;
 }
 
 @keyframes alpha-pyramid-right-in {
   0% {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(10px);
   }
   100% {
     opacity: 1;

package/components/pyramid/circular-pyramid/CircularPyramidStackContent.vue

@@ -53,6 +53,14 @@ const isActive = computed(() => {
   return stackContext?.isActive.value ?? false;
 });
 
+const isAnimated = computed(() => {
+  return rootContext?.animation.value ?? false;
+});
+
+const stepIndex = computed(() => {
+  return stackContext?.index.value ?? 0;
+});
+
 const palette = computed(() => {
   return rootContext?.palette.value;
 });
@@ -111,7 +119,12 @@ const stackColor = computed(() => {
 </script>
 
 <template>
-  <div class="alpha-circular-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible">
+  <div
+    class="alpha-circular-pyramid-stack-content-wrapper relative w-full flex items-center select-none overflow-visible"
+    :style="{
+      '--content-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
+    }"
+  >
     <!-- Scalable Line between Dot and Content Card (always at least 20px) -->
     <div
       ref="connectorRef"
@@ -119,6 +132,9 @@ const stackColor = computed(() => {
     >
       <div
         class="alpha-circular-pyramid-stack-content__dot absolute left-0 top-0 -translate-x-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full flex-shrink-0 transition-all duration-300 pointer-events-auto"
+        :class="{
+          'alpha-circular-pyramid-stack-content__dot--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
@@ -130,6 +146,9 @@ const stackColor = computed(() => {
       <div
         v-if="!effectiveDeltaY"
         class="alpha-circular-pyramid-stack-content__line absolute left-0 top-0 w-full h-[1px] -translate-y-1/2 pointer-events-none transition-colors duration-300"
+        :class="{
+          'alpha-circular-pyramid-stack-content__line--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           opacity: isActive ? 1 : 0.65,
@@ -150,12 +169,16 @@ const stackColor = computed(() => {
       >
         <path
           class="alpha-circular-pyramid-stack-content__line transition-all duration-300"
+          :class="{
+            'alpha-circular-pyramid-stack-content__line--svg-animated': isAnimated,
+          }"
           :d="connectorPath"
           fill="none"
           :stroke="stackColor"
           stroke-width="1.25"
           stroke-linecap="round"
           stroke-linejoin="round"
+          pathLength="1"
           :style="{
             opacity: isActive ? 1 : 0.65,
           }"
@@ -169,6 +192,9 @@ const stackColor = computed(() => {
         isActive
           ? 'alpha-circular-pyramid-stack-content--active'
           : 'alpha-circular-pyramid-stack-content--default',
+        {
+          'alpha-circular-pyramid-stack-content--animated': isAnimated,
+        },
       ]"
       :style="{
         width: `${contentWidth}px`,
@@ -182,6 +208,7 @@ const stackColor = computed(() => {
         boxShadow: isActive
           ? `0 4px 14px ${stackColor}26`
           : 'none',
+        '--card-transform': deltaY ? `translateY(${deltaY}px)` : 'none',
         transform: deltaY ? `translateY(${deltaY}px)` : undefined,
       }"
     >
@@ -205,4 +232,74 @@ const stackColor = computed(() => {
 .alpha-circular-pyramid-stack-content--active {
   backdrop-filter: blur(8px);
 }
+
+.alpha-circular-pyramid-stack-content__dot--animated {
+  animation: alpha-pyramid-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--content-delay) both;
+}
+
+@keyframes alpha-pyramid-dot-pop {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-content__line--animated {
+  transform-origin: left center;
+  animation: alpha-pyramid-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-line-draw {
+  0% {
+    opacity: 0;
+    transform: translateY(-50%) scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(-50%) scaleX(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-content__line--svg-animated {
+  stroke-dasharray: 1;
+  animation: alpha-pyramid-svg-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--content-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-svg-line-draw {
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+  2% {
+    opacity: 1;
+    stroke-dashoffset: 1;
+  }
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+.alpha-circular-pyramid-stack-content--animated {
+  animation: alpha-pyramid-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--content-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-card-in {
+  0% {
+    opacity: 0;
+    transform: var(--card-transform, none) translateX(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: var(--card-transform, none) translateX(0);
+  }
+}
 </style>

package/components/pyramid/circular-pyramid/CircularPyramidStackTitle.vue

@@ -31,6 +31,14 @@ const isActive = computed(() => {
   return stackContext?.isActive.value ?? false;
 });
 
+const isAnimated = computed(() => {
+  return rootContext?.animation.value ?? false;
+});
+
+const stepIndex = computed(() => {
+  return stackContext?.index.value ?? 0;
+});
+
 const resolvedStep = computed(() => {
   if (props.step !== undefined) {
     return props.step;
@@ -65,10 +73,16 @@ const stackColor = computed(() => {
         ? 'alpha-circular-pyramid-stack-title--active'
         : 'alpha-circular-pyramid-stack-title--default',
     ]"
+    :style="{
+      '--title-delay': `calc(var(--circular-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
+    }"
   >
     <!-- Pill Badge Container (min-width: 150px, max-width: whole spacing left leaving at least 30px before dot) -->
     <div
       class="alpha-circular-pyramid-stack-title__pill flex items-center gap-2 px-2.5 py-1 rounded-full transition-all duration-300 border flex-shrink-0"
+      :class="{
+        'alpha-circular-pyramid-stack-title__pill--animated': isAnimated,
+      }"
       :style="{
         minWidth: `${minPillWidth}px`,
         maxWidth: 'calc(100% - 30px)',
@@ -109,6 +123,9 @@ const stackColor = computed(() => {
     >
       <div
         class="alpha-circular-pyramid-stack-title__line flex-1 h-[1px] transition-colors duration-300"
+        :class="{
+          'alpha-circular-pyramid-stack-title__line--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           opacity: isActive ? 1 : 0.65,
@@ -116,6 +133,9 @@ const stackColor = computed(() => {
       />
       <div
         class="alpha-circular-pyramid-stack-title__dot w-1.5 h-1.5 rounded-full flex-shrink-0 -ml-1 transition-all duration-300"
+        :class="{
+          'alpha-circular-pyramid-stack-title__dot--animated': isAnimated,
+        }"
         :style="{
           backgroundColor: stackColor,
           boxShadow: isActive
@@ -135,4 +155,54 @@ const stackColor = computed(() => {
 .alpha-circular-pyramid-stack-title--active .alpha-circular-pyramid-stack-title__pill {
   backdrop-filter: blur(8px);
 }
+
+.alpha-circular-pyramid-stack-title__dot--animated {
+  animation: alpha-pyramid-title-dot-pop 120ms cubic-bezier(0.16, 1, 0.3, 1) var(--title-delay) both;
+}
+
+@keyframes alpha-pyramid-title-dot-pop {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-title__line--animated {
+  transform-origin: right center;
+  animation: alpha-pyramid-title-line-draw 500ms cubic-bezier(0.4, 0, 0.2, 1) calc(var(--title-delay) + 120ms) both;
+}
+
+@keyframes alpha-pyramid-title-line-draw {
+  0% {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  2% {
+    opacity: 1;
+    transform: scaleX(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+}
+
+.alpha-circular-pyramid-stack-title__pill--animated {
+  animation: alpha-pyramid-title-pill-in 240ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--title-delay) + 380ms) both;
+}
+
+@keyframes alpha-pyramid-title-pill-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
 </style>

package/components/pyramid/square-pyramid/SquarePyramid.vue

@@ -773,6 +773,10 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
                   ? `url(#${getActiveShadowId(layer.index)})`
                   : undefined
               "
+              :style="{
+                '--layer-order': layer.index,
+                '--layer-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${layer.index * 260 + 10}ms)`,
+              }"
               @click.stop="handleLayerClick(layer.index, $event)"
             >
               <!-- 1. 3D Square Slab Thickness Rim (Mantle) -->
@@ -839,34 +843,17 @@ const { className, forwardedAttrs } = useMergedUnoAttrs(
   filter: brightness(1.05);
 }
 
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--0 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 60ms) both;
-}
-
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--1 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 140ms) both;
-}
-
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--2 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 220ms) both;
-}
-
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--3 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 300ms) both;
-}
-
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--4 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 380ms) both;
-}
-
-.alpha-square-pyramid--animated .alpha-square-pyramid__layer--5 {
-  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 460ms) both;
+.alpha-square-pyramid--animated .alpha-square-pyramid__layer {
+  animation: alpha-pyramid-layer-enter 450ms cubic-bezier(0.16, 1, 0.3, 1) var(--layer-delay, calc(var(--square-pyramid-start-delay, 0ms) + 10ms)) both;
 }
 
 @keyframes alpha-pyramid-layer-enter {
   0% {
     opacity: 0;
-    transform: translateY(12px) scale(0.97);
+    transform: translateY(80px) scale(0.92);
+  }
+  25% {
+    opacity: 1;
   }
   100% {
     opacity: 1;

package/components/pyramid/square-pyramid/SquarePyramidStack.vue

@@ -9,6 +9,7 @@ import {
   type VNode,
 } from 'vue';
 
+import { PYRAMID_DOT_GAP_PX } from '../../../utils/pyramid/shared';
 import {
   DEFAULT_SQUARE_PYRAMID_COLOR,
   DEFAULT_SQUARE_PYRAMID_STACK_COLORS,
@@ -150,7 +151,7 @@ const leftWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    return Math.max(180, Math.round(cx - rx - 40));
+    return Math.max(180, Math.round(cx - rx - PYRAMID_DOT_GAP_PX));
   }
   return DOT_POSITION_X;
 });
@@ -161,11 +162,11 @@ const rightWingWidth = computed(() => {
   if (layerGeometry.value) {
     const rx = layerGeometry.value.rx;
     const cx = 465;
-    const dotRightX = cx + rx + 40;
+    const dotRightX = cx + rx + PYRAMID_DOT_GAP_PX;
     const containerW = 960;
     return Math.max(rightWidth.value + 20, Math.round(containerW - dotRightX));
   }
-  return rightWidth.value + 40;
+  return rightWidth.value + PYRAMID_DOT_GAP_PX;
 });
 
 const rightOffset = computed(
@@ -207,6 +208,10 @@ const connectorWidth = computed(() => {
   return Math.max(20, rightWingWidth.value - rightWidth.value);
 });
 
+const stepIndex = computed(() => {
+  return resolvedIndex.value;
+});
+
 provide(SQUARE_PYRAMID_STACK_KEY, {
   index: resolvedIndex,
   isActive,
@@ -243,6 +248,7 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${460 + stepIndex * 320}ms)`,
         width: `${leftWidth}px`,
         minWidth: `${leftWidth}px`,
         maxWidth: `${leftWidth}px`,
@@ -258,7 +264,7 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
         :connector-width="props.connectorWidth"
       />
     </div>
-    <!-- Right Wing: Dot + Connector + Content Card (40px from slab) -->
+    <!-- Right Wing: Dot + Connector + Content Card (10px from slab) -->
     <div
       class="alpha-square-pyramid-stack__right flex-shrink-0 flex items-center justify-end pointer-events-auto cursor-pointer"
       :class="[
@@ -266,6 +272,7 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
         { 'alpha-square-pyramid-stack--animated': rootContext?.animation.value },
       ]"
       :style="{
+        '--wing-delay': `calc(var(--square-pyramid-start-delay, 0ms) + ${470 + stepIndex * 320}ms)`,
         width: `${rightWingWidth}px`,
         minWidth: `${rightWidth}px`,
         maxWidth: `${rightWingWidth}px`,
@@ -294,34 +301,14 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
   transition: opacity 0.3s ease, transform 0.3s ease;
 }
 
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--0 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 100ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--1 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 180ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--2 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 260ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--3 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 340ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--4 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 420ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__left--5 {
-  animation: alpha-pyramid-left-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 500ms) both;
+.alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__left {
+  animation: alpha-pyramid-left-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--square-pyramid-start-delay, 0ms) + 460ms)) both;
 }
 
 @keyframes alpha-pyramid-left-in {
   0% {
     opacity: 0;
-    transform: translateX(-12px);
+    transform: translateX(-10px);
   }
   100% {
     opacity: 1;
@@ -329,34 +316,14 @@ provide(SQUARE_PYRAMID_STACK_KEY, {
   }
 }
 
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--0 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 120ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--1 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 200ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--2 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 280ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--3 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 360ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--4 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 440ms) both;
-}
-
-.alpha-square-pyramid-stack--animated.alpha-square-pyramid-stack__right--5 {
-  animation: alpha-pyramid-right-in 450ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--square-pyramid-start-delay, 0ms) + 520ms) both;
+.alpha-square-pyramid-stack--animated .alpha-square-pyramid-stack__right {
+  animation: alpha-pyramid-right-in 140ms cubic-bezier(0.16, 1, 0.3, 1) var(--wing-delay, calc(var(--square-pyramid-start-delay, 0ms) + 470ms)) both;
 }
 
 @keyframes alpha-pyramid-right-in {
   0% {
     opacity: 0;
-    transform: translateX(12px);
+    transform: translateX(10px);
   }
   100% {
     opacity: 1;