From f9cf19c23fc2fd94f58117e50c7ac23e5317b6c5 Mon Sep 17 00:00:00 2001
From: Amirhossein Khalili <amirhosseinkhalili901@gmail.com>
Date: Tue, 8 Sep 2026 12:30:55 +0330
Subject: [PATCH] feat(footer): reveal circuit contacts on scroll

---
 .../IsometricFooter/IsoElements.tsx           |  1 +
 .../IsometricFooter.module.css                | 60 +++++++++++++++++++
 .../IsometricFooter/IsometricFooter.tsx       |  2 +-
 .../IsometricFooter/IsometricScene.tsx        |  6 +-
 src/components/MotionController.tsx           |  2 +-
 5 files changed, 68 insertions(+), 3 deletions(-)

diff --git a/src/components/IsometricFooter/IsoElements.tsx b/src/components/IsometricFooter/IsoElements.tsx
index 79ead21..2eb0f34 100644
--- a/src/components/IsometricFooter/IsoElements.tsx
+++ b/src/components/IsometricFooter/IsoElements.tsx
@@ -348,6 +348,7 @@ export function IsoSignpost({
   return (
     <g
       className={`iso-signpost ${isActive ? 'active' : ''}`}
+      data-footer-contact={_id}
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       onClick={onClick}
diff --git a/src/components/IsometricFooter/IsometricFooter.module.css b/src/components/IsometricFooter/IsometricFooter.module.css
index 9161f0c..70eff8d 100644
--- a/src/components/IsometricFooter/IsometricFooter.module.css
+++ b/src/components/IsometricFooter/IsometricFooter.module.css
@@ -118,6 +118,66 @@
   overflow: visible;
 }
 
+/* Draw the circuit once on scroll, then reveal its four connected signposts. */
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal]
+  :global(.footer-circuit-path) {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  transition: stroke-dashoffset var(--motion-duration-reveal) var(--motion-ease-in-out);
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal][data-visible='true']
+  :global(.footer-circuit-path) {
+  stroke-dashoffset: 0;
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal]
+  :global(.iso-signpost) {
+  opacity: 0;
+  transform: translateY(10px);
+  transform-box: fill-box;
+  transform-origin: center bottom;
+  transition:
+    opacity var(--motion-duration-default) var(--motion-ease-out),
+    transform var(--motion-duration-default) var(--motion-ease-out);
+  transition-delay: var(--motion-duration-reveal);
+  will-change: opacity, transform;
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal]
+  :global(.iso-signpost[data-footer-contact='linkedin']) {
+  transition-delay: calc(var(--motion-duration-reveal) + var(--motion-stagger));
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal]
+  :global(.iso-signpost[data-footer-contact='github']) {
+  transition-delay: calc(
+    var(--motion-duration-reveal) + var(--motion-stagger) + var(--motion-stagger)
+  );
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal]
+  :global(.iso-signpost[data-footer-contact='telegram']) {
+  transition-delay: calc(
+    var(--motion-duration-reveal) + var(--motion-stagger) + var(--motion-stagger) +
+      var(--motion-stagger)
+  );
+}
+
+:global(html[data-motion-ready='true'])
+  .sceneContainer[data-footer-reveal][data-visible='true']
+  :global(.iso-signpost) {
+  opacity: 1;
+  transform: translateY(0);
+  will-change: auto;
+}
+
 /* --------------------------------------------------------------------------
    Synchronized Contact Cards Grid
    -------------------------------------------------------------------------- */
diff --git a/src/components/IsometricFooter/IsometricFooter.tsx b/src/components/IsometricFooter/IsometricFooter.tsx
index 5fa2fe3..01dcab9 100644
--- a/src/components/IsometricFooter/IsometricFooter.tsx
+++ b/src/components/IsometricFooter/IsometricFooter.tsx
@@ -85,7 +85,7 @@ export default function IsometricFooter() {
       </header>
 
       {/* 3D Isometric SVG Scene */}
-      <div className={styles.sceneContainer}>
+      <div className={styles.sceneContainer} data-footer-reveal>
         <IsometricScene
           activePost={activePost}
           onPostHover={setActivePost}
diff --git a/src/components/IsometricFooter/IsometricScene.tsx b/src/components/IsometricFooter/IsometricScene.tsx
index a1dae35..0ef1468 100644
--- a/src/components/IsometricFooter/IsometricScene.tsx
+++ b/src/components/IsometricFooter/IsometricScene.tsx
@@ -277,7 +277,9 @@ function CircuitConduits({ activePost }: { activePost: string | null }) {
 
       {/* Left Branch: Phone -> Step 3 -> LinkedIn -> Center Platform with exact ±0.5 slope */}
       <path
-        d="M 280,360 L 360,320 L 440,360 L 514,323"
+        d="M 514,323 L 440,360 L 360,320 L 280,360"
+        className="footer-circuit-path"
+        pathLength={1}
         fill="none"
         stroke="var(--accent-default, #3D8AFA)"
         strokeWidth={2.5}
@@ -290,6 +292,8 @@ function CircuitConduits({ activePost }: { activePost: string | null }) {
       {/* Right Branch: Center Platform -> GitHub -> Step 5 -> Telegram with exact ±0.5 slope */}
       <path
         d="M 686,323 L 760,360 L 840,320 L 920,360"
+        className="footer-circuit-path"
+        pathLength={1}
         fill="none"
         stroke="var(--accent-default, #3D8AFA)"
         strokeWidth={2.5}
diff --git a/src/components/MotionController.tsx b/src/components/MotionController.tsx
index 3bbf8e5..0cf8f3a 100644
--- a/src/components/MotionController.tsx
+++ b/src/components/MotionController.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 
-const REVEAL_SELECTOR = '[data-reveal]';
+const REVEAL_SELECTOR = '[data-reveal], [data-footer-reveal]';
 
 export const MotionController = () => {
   useEffect(() => {