wip (transition between 2 and 3 still bad)

Author: hasparus

src/components/index-page/what-is-graphql/api-gateway-response.mdx

@@ -0,0 +1,15 @@
+```json
+{
+  "data": {
+    "cities": [
+      {
+        "population": 8675309,
+        "weather": {
+          "temperature": 22.5,
+          "precipitation": 1.2
+        }
+      }
+    ]
+  }
+}
+```

src/components/index-page/what-is-graphql/wires.module.css

@@ -8,19 +8,34 @@
   }
 }
 
-.highlightsQuery {
+.highlightsQuery,
+.highlightsResponse {
   & pre > code:global(.nextra-code) > span {
-    transition: background-color 1s ease-out;
+    position: relative;
+
+    &::before {
+      transition: opacity 1s ease-out;
+    }
+  }
+}
+
+.highlightsQuery {
+  & pre > code:global(.nextra-code) > span::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition: opacity 1s ease-out;
     transition-delay: 1s;
+    opacity: var(--highlight-opacity, 0);
 
     &:nth-child(2),
     &:nth-child(3) {
       @apply bg-pri-lighter/20 dark:bg-pri-light/5;
     }
     &:nth-child(4) {
-      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-lighter/20 dark:from-pri-light/5 dark:to-sec-light/5;
+      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-light/20 dark:from-pri-light/5 dark:to-sec-light/5;
       background-image: linear-gradient(
-        to bottom in oklab,
+        to bottom in oklch,
         var(--tw-gradient-stops)
       );
     }
@@ -30,3 +45,30 @@
     }
   }
 }
+
+.highlightsResponse {
+  & pre > code:global(.nextra-code) > span::before {
+    position: absolute;
+    inset: 0;
+    content: "";
+    transition-delay: 1s;
+
+    &:nth-child(3),
+    &:nth-child(4),
+    &:nth-child(5) {
+      @apply bg-pri-lighter/20 dark:bg-pri-light/5;
+    }
+    &:nth-child(6) {
+      @apply bg-gradient-to-b from-pri-lighter/20 to-sec-lighter/20 dark:from-pri-light/5 dark:to-sec-light/5;
+      background-image: linear-gradient(
+        to bottom in oklch,
+        var(--tw-gradient-stops)
+      );
+    }
+    &:nth-child(7),
+    &:nth-child(8),
+    &:nth-child(9) {
+      @apply bg-sec-lighter/20 dark:bg-sec-light/5;
+    }
+  }
+}

src/components/index-page/what-is-graphql/wires.tsx

@@ -23,6 +23,7 @@ import {
   ServerIcon,
 } from "./icons"
 import QueryMdx from "./api-gateway-query.mdx"
+import ResponseMdx from "./api-gateway-response.mdx"
 import classes from "./wires.module.css"
 
 function ClientEdges({
@@ -478,8 +479,8 @@ const components = {
 }
 
 export function Wires({ className }: { className?: string }) {
-  const STEPS = 2
-  const [step, inc] = useReducer(x => (x + 1) % STEPS, 0)
+  const STEPS = 3
+  const [step, inc] = useReducer(x => (x + 1) % STEPS, 2)
 
   const ref = useRef<SVGSVGElement>(null)
 
@@ -495,18 +496,8 @@ export function Wires({ className }: { className?: string }) {
     return () => animate?.removeEventListener("repeatEvent", inc)
   }, [])
 
-  // todo: highlight the lines in step 3
-
   return (
-    <div
-      className={clsx(
-        className,
-        "relative isolate",
-        classes.wires,
-        step === 1 && classes.highlightsQuery,
-        step === 2 && classes.highlightsResponse,
-      )}
-    >
+    <div className={clsx(className, "relative isolate", classes.wires)}>
       <svg
         id="what-is-graphql--wires"
         width="1248"
@@ -520,11 +511,37 @@ export function Wires({ className }: { className?: string }) {
       >
         <ClientEdges highlightedEdge={0} highlightedVisible={step === 0} />
         <ClientBoxes highlighted={step === 0 ? 0 : undefined} />
-        <ServerEdges highlighted={[1, 6]} highlightedVisible={step === 1} />
-        <ServerBoxes highlighted={step === 1 ? [1, 6] : []} />
+        <ServerEdges highlighted={[1, 6]} highlightedVisible={step > 0} />
+        <ServerBoxes highlighted={step > 0 ? [1, 6] : []} />
         <SVGDefinitions />
       </svg>
-      <QueryMdx components={components} />
+      <div
+        className={clsx(
+          "absolute inset-0 transition-opacity",
+          classes.highlightsQuery,
+        )}
+        style={{
+          opacity: step < 2 ? 1 : 0,
+          transitionDelay: step < 2 ? "0s" : "0.5s",
+          ...(step === 1 && {
+            "--highlight-opacity": 1,
+          }),
+        }}
+      >
+        <QueryMdx components={components} />
+      </div>
+      <div
+        className={clsx(
+          "absolute inset-0 transition-opacity [&>pre]:bg-neu-0",
+          classes.highlightsResponse,
+        )}
+        style={{
+          opacity: step === 2 ? 1 : 0,
+          transitionDelay: step === 2 ? "0s" : "0.5s",
+        }}
+      >
+        <ResponseMdx components={components} />
+      </div>
     </div>
   )
 }