From 356981f5c4a84565a951c060b3049e596ecf87ee Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 14 Aug 2025 20:32:34 +0200
Subject: [PATCH 1/7] Extract edges and boxes out from the components.

---
 .../index-page/data-colocation/index.tsx      |   4 +-
 .../index-page/what-is-graphql/wires.tsx      | 153 +++++++++++-------
 2 files changed, 96 insertions(+), 61 deletions(-)

diff --git a/src/components/index-page/data-colocation/index.tsx b/src/components/index-page/data-colocation/index.tsx
index 90514228d9..1f54f51de2 100644
--- a/src/components/index-page/data-colocation/index.tsx
+++ b/src/components/index-page/data-colocation/index.tsx
@@ -11,6 +11,8 @@ import {
 import { Pre } from "@/components/pre"
 import { SectionLabel } from "@/app/conf/_design-system/section-label"
 import InfoIcon from "@/app/conf/_design-system/pixelarticons/info.svg?svgr"
+import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
+import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
 
 import { ComponentTree } from "./component-tree"
 import { FriendList } from "./friend-list"
@@ -18,8 +20,6 @@ import { FriendList } from "./friend-list"
 import json from "./data-colocation.json"
 import Query from "./data-colocation.mdx"
 import "./data-colocation.css"
-import { useOnClickOutside } from "@/app/conf/_design-system/utils/useOnClickOutside"
-import { isSpanElement } from "@/app/conf/_design-system/utils/isSpanElement"
 
 const highlightedFragments = {
   GetFriendList: 1,
diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index ff17025579..f895ab90de 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -8,6 +8,7 @@ import {
   useReducer,
   useRef,
 } from "react"
+import { throttle } from "@/app/conf/_design-system/utils/throttle"
 
 import { Code } from "nextra/components"
 
@@ -27,32 +28,33 @@ import {
 import QueryMdx from "./api-gateway-query.mdx"
 import ResponseMdx from "./api-gateway-response.mdx"
 import styles from "./wires.module.css"
-import { throttle } from "@/app/conf/_design-system/utils/throttle"
+
+const bigScreenClientEdges = [
+  "M514.5 220H424.5V76H72",
+  "M446 220H424.5V112H144",
+  "M446 220H424.5V147H72",
+  "M446 220H424.5V184H144",
+  "M528 220H514.206L72 220",
+  "M528 220L424.866 220V256H144",
+  "M446 220L424.5 220V291.75H72",
+  "M528.5 220H424.5V328H144",
+  "M528 220H424.772V365H72",
+]
 
 function ClientEdges({
   highlightedEdge,
   highlightedVisible,
+  edges,
 }: {
   highlightedEdge?: number
   highlightedVisible: boolean
+  edges: string[]
 }) {
-  const paths = [
-    "M514.5 220H424.5V76H72",
-    "M446 220H424.5V112H144",
-    "M446 220H424.5V147H72",
-    "M446 220H424.5V184H144",
-    "M528 220H514.206L72 220",
-    "M528 220L424.866 220V256H144",
-    "M446 220L424.5 220V291.75H72",
-    "M528.5 220H424.5V328H144",
-    "M528 220H424.772V365H72",
-  ]
-
   return (
     <>
       {moveHighlightedToTop(
         highlightedEdge,
-        paths.map((path, index) => (
+        edges.map((path, index) => (
           <Fragment key={index}>
             <path
               d={path}
@@ -74,28 +76,30 @@ function ClientEdges({
   )
 }
 
+const bigScreenServerEdges = [
+  "M696 159.5H811.5V75H1176",
+  "M696 175.5L833.5 175.5V112H1104.5",
+  "M696 191.5H855.5V148.5H1176",
+  "M696 206.5L876 206.5V184.5H1104",
+  "M696 220.5H704.5H1176",
+  "M696 234.5L876 234.5V256.5H1104",
+  "M696 249.5H855.5V292.5H1176",
+  "M696 265.5L833.5 265.5V329H1104",
+  "M696 281.5H811.5V366H1176",
+]
+
 function ServerEdges({
   highlighted,
   highlightedVisible,
+  edges,
 }: {
   highlighted: number[]
   highlightedVisible: boolean
+  edges: string[]
 }) {
-  const paths = [
-    "M696 159.5H811.5V75H1176",
-    "M696 175.5L833.5 175.5V112H1104.5",
-    "M696 191.5H855.5V148.5H1176",
-    "M696 206.5L876 206.5V184.5H1104",
-    "M696 220.5H704.5H1176",
-    "M696 234.5L876 234.5V256.5H1104",
-    "M696 249.5H855.5V292.5H1176",
-    "M696 265.5L833.5 265.5V329H1104",
-    "M696 281.5H811.5V366H1176",
-  ] as const
-
   return (
     <>
-      {paths.map((d, index) => {
+      {edges.map((d, index) => {
         const isHighlighted = highlighted?.includes(index)
         return (
           <Fragment key={index}>
@@ -147,21 +151,27 @@ function Box({
   )
 }
 
-function ClientBoxes({ highlighted }: { highlighted?: number }) {
-  /* eslint-disable react/jsx-key */
-  const boxes = [
-    ["translate(16, 48)", <DesktopIcon />],
-    ["translate(88, 84)", <PhoneIcon />],
-    ["translate(16, 120)", <PhoneIcon />],
-    ["translate(88, 156)", <WristwatchIcon />],
-    ["translate(16, 192)", <TelevisionIcon />],
-    ["translate(88, 228)", <DesktopIcon />],
-    ["translate(16, 264)", <TabletIcon />],
-    ["translate(88, 300)", <PhoneIcon />],
-    ["translate(16, 336)", <WristwatchIcon />],
-  ] as const
-  /* eslint-enable react/jsx-key */
+/* eslint-disable react/jsx-key */
+const bigScreenClientBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(16, 48)", <DesktopIcon />],
+  ["translate(88, 84)", <PhoneIcon />],
+  ["translate(16, 120)", <PhoneIcon />],
+  ["translate(88, 156)", <WristwatchIcon />],
+  ["translate(16, 192)", <TelevisionIcon />],
+  ["translate(88, 228)", <DesktopIcon />],
+  ["translate(16, 264)", <TabletIcon />],
+  ["translate(88, 300)", <PhoneIcon />],
+  ["translate(16, 336)", <WristwatchIcon />],
+]
+/* eslint-enable react/jsx-key */
 
+function ClientBoxes({
+  highlighted,
+  boxes,
+}: {
+  highlighted?: number
+  boxes: Array<[string, React.ReactNode]>
+}) {
   return (
     <>
       {boxes.map(([transform, children], index) => {
@@ -184,21 +194,27 @@ function ClientBoxes({ highlighted }: { highlighted?: number }) {
   )
 }
 
-function ServerBoxes({ highlighted }: { highlighted: number[] }) {
-  /* eslint-disable react/jsx-key */
-  const boxes = [
-    ["translate(1176, 48)", <LabirynthIcon />],
-    ["translate(1104, 84)", <ServerIcon />],
-    ["translate(1176, 120)", <ModemIcon />],
-    ["translate(1104, 156)", <CloudIcon />],
-    ["translate(1176, 192)", <LabirynthIcon />],
-    ["translate(1104, 228)", <ModemIcon />],
-    ["translate(1176, 264)", <CloudIcon />],
-    ["translate(1104, 300)", <CloudIcon />],
-    ["translate(1176, 336)", <ServerIcon />],
-  ] as const
-  /* eslint-enable react/jsx-key */
+/* eslint-disable react/jsx-key */
+const bigScreenServerBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(1176, 48)", <LabirynthIcon />],
+  ["translate(1104, 84)", <ServerIcon />],
+  ["translate(1176, 120)", <ModemIcon />],
+  ["translate(1104, 156)", <CloudIcon />],
+  ["translate(1176, 192)", <LabirynthIcon />],
+  ["translate(1104, 228)", <ModemIcon />],
+  ["translate(1176, 264)", <CloudIcon />],
+  ["translate(1104, 300)", <CloudIcon />],
+  ["translate(1176, 336)", <ServerIcon />],
+]
+/* eslint-enable react/jsx-key */
 
+function ServerBoxes({
+  highlighted,
+  boxes,
+}: {
+  highlighted: number[]
+  boxes: Array<[string, React.ReactNode]>
+}) {
   return (
     <>
       {boxes.map(([transform, children], index) => {
@@ -520,6 +536,7 @@ export function Wires({ className }: { className?: string }) {
         styles.wires,
       )}
     >
+      <MobileDiagram />
       <svg
         id="what-is-graphql--wires"
         width="1248"
@@ -531,10 +548,24 @@ export function Wires({ className }: { className?: string }) {
         className="relative h-auto w-full"
         ref={ref}
       >
-        <ClientEdges highlightedEdge={0} highlightedVisible={step === 0} />
-        <ClientBoxes highlighted={step === 0 ? 0 : undefined} />
-        <ServerEdges highlighted={[1, 6]} highlightedVisible={step > 0} />
-        <ServerBoxes highlighted={step > 0 ? [1, 6] : []} />
+        <ClientEdges
+          highlightedEdge={0}
+          highlightedVisible={step === 0}
+          edges={bigScreenClientEdges}
+        />
+        <ClientBoxes
+          highlighted={step === 0 ? 0 : undefined}
+          boxes={bigScreenClientBoxes}
+        />
+        <ServerEdges
+          highlighted={[1, 6]}
+          highlightedVisible={step > 0}
+          edges={bigScreenServerEdges}
+        />
+        <ServerBoxes
+          highlighted={step > 0 ? [1, 6] : []}
+          boxes={bigScreenServerBoxes}
+        />
         <SVGDefinitions />
       </svg>
       <button
@@ -602,3 +633,7 @@ function Curtain() {
     />
   )
 }
+
+function MobileDiagram() {
+  return <svg>{/* HERE */}</svg>
+}

From a82b54426a462af326b7735683dcb985e09944bb Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 14 Aug 2025 21:47:23 +0200
Subject: [PATCH 2/7] Make diagram boxes and edges responsive

---
 .../index-page/what-is-graphql/wires.tsx      | 142 +++++++++++++++++-
 1 file changed, 138 insertions(+), 4 deletions(-)

diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index f895ab90de..0ab0a4aa29 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -141,11 +141,11 @@ function Box({
     <g
       transform={transform}
       className={clsx(
-        "fill-neu-100 [&>path]:translate-x-4 [&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600",
+        "fill-neu-100 [&>path]:translate-x-3 [&>path]:translate-y-3 sm:[&>path]:translate-x-4 sm:[&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600",
         className,
       )}
     >
-      <rect width="56" height="56" />
+      <rect className="size-[48px] sm:size-[56px]" />
       {children}
     </g>
   )
@@ -545,7 +545,7 @@ export function Wires({ className }: { className?: string }) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
-        className="relative h-auto w-full"
+        className="relative h-auto w-full max-sm:hidden"
         ref={ref}
       >
         <ClientEdges
@@ -634,6 +634,140 @@ function Curtain() {
   )
 }
 
+// Mobile diagram data
+/* eslint-disable react/jsx-key */
+const mobileClientBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(0, 0)", <DesktopIcon />],
+  ["translate(65, 0)", <PhoneIcon />],
+  ["translate(130, 0)", <PhoneIcon />],
+  ["translate(195, 0)", <WristwatchIcon />],
+  ["translate(260, 0)", <TelevisionIcon />],
+]
+
+const mobileServerBoxes: Array<[string, React.ReactNode]> = [
+  ["translate(2, 454)", <LabirynthIcon />],
+  ["translate(67, 454)", <ServerIcon />],
+  ["translate(132, 454)", <ModemIcon />],
+  ["translate(197, 454)", <CloudIcon />],
+  ["translate(262, 454)", <CloudIcon />],
+]
+/* eslint-enable react/jsx-key */
+
+function MobileClientEdges() {
+  return (
+    <>
+      <path
+        d="M154 157L154 85L219 85L219 48"
+        stroke="url(#smallscreen_linear1)"
+      />
+      <path
+        d="M154 157L154 84.9209L88 84.9209L88 48"
+        stroke="url(#smallscreen_linear1)"
+      />
+      <path
+        d="M154 107.855L154 157L155 48"
+        stroke="url(#smallscreen_linear1)"
+      />
+      <path
+        d="M154 157L154.002 85L284 85L284 48"
+        stroke="url(#smallscreen_linear1)"
+      />
+      <path
+        d="M154 158L154 136.031L154 85L24 84.8443L24 48"
+        stroke="url(#smallscreen_linear1)"
+        strokeWidth="2"
+      />
+    </>
+  )
+}
+
+function MobileServerEdges() {
+  return (
+    <>
+      <path
+        d="M130.094 344L130.094 426L91.6745 426L91.6745 454"
+        stroke="url(#smallscrean_linear2)"
+      />
+      <path
+        d="M156.002 344L156.002 345.948L156.002 454"
+        stroke="url(#smallscrean_linear2)"
+      />
+      <path
+        d="M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454"
+        stroke="url(#smallscrean_linear2)"
+      />
+      <path
+        d="M181.918 344L181.916 426L220.335 426L220.337 454"
+        stroke="url(#smallscrean_linear2)"
+      />
+      <path
+        d="M210.512 344L210.512 398L286.008 398L286.008 454"
+        stroke="url(#smallscrean_linear2)"
+      />
+    </>
+  )
+}
+
+function MobileSVGDefinitions() {
+  return (
+    <defs>
+      <linearGradient
+        id="smallscreen_linear1"
+        x1="0.142323"
+        y1="124.751"
+        x2="0.142321"
+        y2="-122.582"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-50))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+      <linearGradient
+        id="smallscrean_linear2"
+        x1="66.6927"
+        y1="344"
+        x2="66.6927"
+        y2="399.436"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-100))"
+          className="dark:[stop-color:hsl(var(--color-neu-50))]"
+        />
+        <stop
+          offset="1"
+          stopColor="hsl(var(--color-neu-600))"
+          className="dark:[stop-color:hsl(var(--color-neu-100))]"
+        />
+      </linearGradient>
+    </defs>
+  )
+}
+
 function MobileDiagram() {
-  return <svg>{/* HERE */}</svg>
+  return (
+    <svg
+      width="310"
+      height="502"
+      viewBox="0 0 310 502"
+      fill="none"
+      preserveAspectRatio="xMidYMid"
+      xmlns="http://www.w3.org/2000/svg"
+      className="mx-auto sm:hidden"
+      aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
+    >
+      <MobileClientEdges />
+      <ClientBoxes boxes={mobileClientBoxes} />
+      <MobileServerEdges />
+      <ServerBoxes highlighted={[]} boxes={mobileServerBoxes} />
+      <MobileSVGDefinitions />
+    </svg>
+  )
 }

From 97ad416deb3229d2862c6c9865a3f37b8d294c69 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 14 Aug 2025 21:56:21 +0200
Subject: [PATCH 3/7] Make the diagram less tall

---
 src/components/index-page/what-is-graphql/wires.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index 0ab0a4aa29..817126d2d5 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -755,7 +755,7 @@ function MobileDiagram() {
   return (
     <svg
       width="310"
-      height="502"
+      height="450"
       viewBox="0 0 310 502"
       fill="none"
       preserveAspectRatio="xMidYMid"

From 5a8928f1981d21f3d8927ac4248a8c5c002adc40 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 15 Aug 2025 17:44:15 +0200
Subject: [PATCH 4/7] Animate client edge on small screens

---
 .../index-page/what-is-graphql/wires.tsx      | 107 +++++++++++-------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index 817126d2d5..147b59812c 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -45,10 +45,14 @@ function ClientEdges({
   highlightedEdge,
   highlightedVisible,
   edges,
+  baseStroke = "url(#paint_lr_light_linear_671_9150)",
+  highlightedStroke = "url(#paint_lr_dark_linear_671_9150)",
 }: {
   highlightedEdge?: number
   highlightedVisible: boolean
   edges: string[]
+  baseStroke?: string
+  highlightedStroke?: string
 }) {
   return (
     <>
@@ -56,15 +60,11 @@ function ClientEdges({
         highlightedEdge,
         edges.map((path, index) => (
           <Fragment key={index}>
-            <path
-              d={path}
-              stroke="url(#paint_lr_light_linear_671_9150)"
-              strokeWidth="1"
-            />
+            <path d={path} stroke={baseStroke} strokeWidth="1" />
             {highlightedEdge === index && (
               <path
                 d={path}
-                stroke="url(#paint_lr_dark_linear_671_9150)"
+                stroke={highlightedStroke}
                 strokeWidth="3"
                 className={highlightedVisible ? "opacity-100" : "opacity-0"}
               />
@@ -479,7 +479,7 @@ const components = {
     <Pre
       {...props}
       tabIndex={-1}
-      containerClassName="!absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-sm:scale-75 pointer-events-auto"
+      containerClassName="!absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-sm:scale-90 pointer-events-auto"
       // the border color on white and black backgrounds blends into border-neu-200 (and border-neu-50 in dark mode)
       className="overflow-hidden border-none !bg-transparent before:absolute before:inset-0 before:-z-10 before:rounded-md before:border before:border-transparent before:bg-[rgba(55,72,13,0.12)] before:bg-clip-border before:[backdrop-filter:url(#what-is-graphql--code-backdrop)] after:absolute after:inset-[1.5px] after:z-[-9] after:rounded-[5px] after:bg-[linear-gradient(to_right,transparent,hsl(var(--color-neu-0))_15%,hsl(var(--color-neu-0))_85%,transparent)] after:[backdrop-filter:url(#what-is-graphql--code-backdrop-2)] safari:after:[backdrop-filter:blur(12px)] dark:before:border-[rgba(235,252,191,0.2)] dark:before:bg-none dark:before:backdrop-blur-xl dark:before:[backdrop-filter:url(#what-is-graphql--code-backdrop-2-dark)] dark:after:bg-[linear-gradient(to_right,hsl(var(--color-neu-0)/0.5),hsl(var(--color-neu-0)/.8)_10%,hsl(var(--color-neu-0)/.8)_83%,hsl(var(--color-neu-0)/0.4))] dark:after:[backdrop-filter:blur(24px)]"
     >
@@ -514,6 +514,7 @@ export function Wires({ className }: { className?: string }) {
     return () => animate?.removeEventListener("repeatEvent", onAnimationRepeat)
   }, [])
 
+  // todo: remove this per Uri's request OR switch it to development only
   const onBackgroundClick = useMemo(
     () =>
       throttle(() => {
@@ -536,7 +537,7 @@ export function Wires({ className }: { className?: string }) {
         styles.wires,
       )}
     >
-      <MobileDiagram />
+      <MobileDiagram step={step} />
       <svg
         id="what-is-graphql--wires"
         width="1248"
@@ -545,7 +546,7 @@ export function Wires({ className }: { className?: string }) {
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
-        className="relative h-auto w-full max-sm:hidden"
+        className="relative h-auto min-h-[320px] w-full max-sm:hidden"
         ref={ref}
       >
         <ClientEdges
@@ -634,7 +635,14 @@ function Curtain() {
   )
 }
 
-// Mobile diagram data
+const mobileClientEdges = [
+  "M154 157L155 85L24 84.8443L24 48",
+  "M154 157L154 84.9209L88 84.9209L88 48",
+  "M154 107.855L154 157L155 48",
+  "M154 157L154 85L219 85L219 48",
+  "M154 157L154.002 85L284 85L284 48",
+]
+
 /* eslint-disable react/jsx-key */
 const mobileClientBoxes: Array<[string, React.ReactNode]> = [
   ["translate(0, 0)", <DesktopIcon />],
@@ -653,34 +661,6 @@ const mobileServerBoxes: Array<[string, React.ReactNode]> = [
 ]
 /* eslint-enable react/jsx-key */
 
-function MobileClientEdges() {
-  return (
-    <>
-      <path
-        d="M154 157L154 85L219 85L219 48"
-        stroke="url(#smallscreen_linear1)"
-      />
-      <path
-        d="M154 157L154 84.9209L88 84.9209L88 48"
-        stroke="url(#smallscreen_linear1)"
-      />
-      <path
-        d="M154 107.855L154 157L155 48"
-        stroke="url(#smallscreen_linear1)"
-      />
-      <path
-        d="M154 157L154.002 85L284 85L284 48"
-        stroke="url(#smallscreen_linear1)"
-      />
-      <path
-        d="M154 158L154 136.031L154 85L24 84.8443L24 48"
-        stroke="url(#smallscreen_linear1)"
-        strokeWidth="2"
-      />
-    </>
-  )
-}
-
 function MobileServerEdges() {
   return (
     <>
@@ -729,6 +709,45 @@ function MobileSVGDefinitions() {
           className="dark:[stop-color:hsl(var(--color-neu-100))]"
         />
       </linearGradient>
+      <linearGradient
+        id="smallscreen_linear1_high"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop stopColor="hsl(var(--color-neu-700))">
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-neu-300))"
+          className="dark:[stop-color:hsl(var(--color-neu-200))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
       <linearGradient
         id="smallscrean_linear2"
         x1="66.6927"
@@ -751,11 +770,11 @@ function MobileSVGDefinitions() {
   )
 }
 
-function MobileDiagram() {
+function MobileDiagram({ step }: { step: number }) {
   return (
     <svg
       width="310"
-      height="450"
+      height="490"
       viewBox="0 0 310 502"
       fill="none"
       preserveAspectRatio="xMidYMid"
@@ -763,7 +782,13 @@ function MobileDiagram() {
       className="mx-auto sm:hidden"
       aria-label="GraphQL allows you to build API Gateways to bring data from multiple sources to your clients in a single query"
     >
-      <MobileClientEdges />
+      <ClientEdges
+        edges={mobileClientEdges}
+        highlightedEdge={0}
+        highlightedVisible={step === 0}
+        baseStroke="url(#smallscreen_linear1)"
+        highlightedStroke="url(#smallscreen_linear1_high)"
+      />
       <ClientBoxes boxes={mobileClientBoxes} />
       <MobileServerEdges />
       <ServerBoxes highlighted={[]} boxes={mobileServerBoxes} />

From c445fef45ba6940bcf52a691430a568625bcf007 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Fri, 15 Aug 2025 18:17:12 +0200
Subject: [PATCH 5/7] Animate server edges on small screens

---
 .../index-page/what-is-graphql/wires.tsx      | 157 +++++++++++++-----
 1 file changed, 119 insertions(+), 38 deletions(-)

diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index 147b59812c..b461636e42 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -92,10 +92,16 @@ function ServerEdges({
   highlighted,
   highlightedVisible,
   edges,
+  baseStroke,
+  oddStroke,
+  evenStroke,
 }: {
   highlighted: number[]
   highlightedVisible: boolean
   edges: string[]
+  baseStroke: string
+  oddStroke: string
+  evenStroke: string
 }) {
   return (
     <>
@@ -103,20 +109,14 @@ function ServerEdges({
         const isHighlighted = highlighted?.includes(index)
         return (
           <Fragment key={index}>
-            <path
-              d={d}
-              strokeWidth={1}
-              className="stroke-[url(#paint_sr_light_linear_671_9150)]"
-            />
+            <path d={d} strokeWidth={1} className={baseStroke} />
             {isHighlighted && (
               <path
                 d={d}
                 strokeWidth={3}
                 className={clsx(
                   highlightedVisible ? "opacity-100" : "opacity-0",
-                  index % 2
-                    ? "stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
-                    : "stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]",
+                  index % 2 ? oddStroke : evenStroke,
                 )}
               />
             )}
@@ -562,6 +562,9 @@ export function Wires({ className }: { className?: string }) {
           highlighted={[1, 6]}
           highlightedVisible={step > 0}
           edges={bigScreenServerEdges}
+          baseStroke="stroke-[url(#paint_sr_light_linear_671_9150)]"
+          oddStroke="stroke-[url(#paint_sr_pri_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_pri_highlight_linear_static_671_9150)]"
+          evenStroke="stroke-[url(#paint_sr_sec_highlight_linear_671_9150)] motion-reduce:stroke-[url(#paint_sr_sec_highlight_linear_static_671_9150)]"
         />
         <ServerBoxes
           highlighted={step > 0 ? [1, 6] : []}
@@ -661,32 +664,13 @@ const mobileServerBoxes: Array<[string, React.ReactNode]> = [
 ]
 /* eslint-enable react/jsx-key */
 
-function MobileServerEdges() {
-  return (
-    <>
-      <path
-        d="M130.094 344L130.094 426L91.6745 426L91.6745 454"
-        stroke="url(#smallscrean_linear2)"
-      />
-      <path
-        d="M156.002 344L156.002 345.948L156.002 454"
-        stroke="url(#smallscrean_linear2)"
-      />
-      <path
-        d="M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454"
-        stroke="url(#smallscrean_linear2)"
-      />
-      <path
-        d="M181.918 344L181.916 426L220.335 426L220.337 454"
-        stroke="url(#smallscrean_linear2)"
-      />
-      <path
-        d="M210.512 344L210.512 398L286.008 398L286.008 454"
-        stroke="url(#smallscrean_linear2)"
-      />
-    </>
-  )
-}
+const mobileServerEdges = [
+  "M181.918 344L181.916 426L220.335 426L220.337 454",
+  "M210.512 344L210.512 398L286.008 398L286.008 454",
+  "M156.002 344L156.002 345.948L156.002 454",
+  "M101.504 344L101.504 398.5L26.0075 398.5L26.0075 454",
+  "M130.094 344L130.094 426L91.6745 426L91.6745 454",
+]
 
 function MobileSVGDefinitions() {
   return (
@@ -749,7 +733,7 @@ function MobileSVGDefinitions() {
       </linearGradient>
 
       <linearGradient
-        id="smallscrean_linear2"
+        id="smallscreen_linear2"
         x1="66.6927"
         y1="344"
         x2="66.6927"
@@ -766,6 +750,90 @@ function MobileSVGDefinitions() {
           className="dark:[stop-color:hsl(var(--color-neu-100))]"
         />
       </linearGradient>
+
+      <linearGradient
+        id="smallscreen_linear2_pri"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-dark))"
+          className="dark:[stop-color:hsl(var(--color-pri-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-pri-lighter))"
+          className="dark:[stop-color:hsl(var(--color-pri-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
+
+      <linearGradient
+        id="smallscreen_linear2_sec"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-2.562;1.438;-2.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-dark))"
+          className="dark:[stop-color:hsl(var(--color-sec-light))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop
+          stopColor="hsl(var(--color-sec-light))"
+          className="dark:[stop-color:hsl(var(--color-sec-darker))]"
+        >
+          <animate
+            attributeName="offset"
+            values="-0.562;3.438;-0.562"
+            begin="2.5s"
+            dur="5s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
     </defs>
   )
 }
@@ -789,9 +857,22 @@ function MobileDiagram({ step }: { step: number }) {
         baseStroke="url(#smallscreen_linear1)"
         highlightedStroke="url(#smallscreen_linear1_high)"
       />
-      <ClientBoxes boxes={mobileClientBoxes} />
-      <MobileServerEdges />
-      <ServerBoxes highlighted={[]} boxes={mobileServerBoxes} />
+      <ClientBoxes
+        boxes={mobileClientBoxes}
+        highlighted={step === 0 ? 0 : undefined}
+      />
+      <ServerEdges
+        edges={mobileServerEdges}
+        highlighted={[1, 4]}
+        highlightedVisible={step > 0}
+        baseStroke="stroke-[url(#smallscreen_linear2)]"
+        evenStroke="stroke-[url(#smallscreen_linear2_pri)]"
+        oddStroke="stroke-[url(#smallscreen_linear2_sec)]"
+      />
+      <ServerBoxes
+        highlighted={step > 0 ? [1, 4] : []}
+        boxes={mobileServerBoxes}
+      />
       <MobileSVGDefinitions />
     </svg>
   )

From 78c3e0c47909b38dd965787c2674a7c56757efc4 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 18 Aug 2025 13:14:22 +0200
Subject: [PATCH 6/7] Remove next step on background click per Uri's request

---
 .../index-page/what-is-graphql/wires.tsx      | 60 +++++++++++--------
 1 file changed, 35 insertions(+), 25 deletions(-)

diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index b461636e42..426abdcd5f 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -494,7 +494,6 @@ export function Wires({ className }: { className?: string }) {
   const [step, inc] = useReducer(x => (x + 1) % STEPS, 0)
 
   const ref = useRef<SVGSVGElement>(null)
-  const backgroundRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
     const animate = document.querySelector(
@@ -502,8 +501,6 @@ export function Wires({ className }: { className?: string }) {
     )
 
     const onAnimationRepeat = () => {
-      // we avoid spinning a second time if the user has just clicked the button
-      if (backgroundRef.current?.disabled) return
       inc()
     }
 
@@ -514,21 +511,6 @@ export function Wires({ className }: { className?: string }) {
     return () => animate?.removeEventListener("repeatEvent", onAnimationRepeat)
   }, [])
 
-  // todo: remove this per Uri's request OR switch it to development only
-  const onBackgroundClick = useMemo(
-    () =>
-      throttle(() => {
-        const button = backgroundRef.current
-        if (!button) return
-        button.disabled = true
-        inc()
-        setTimeout(() => {
-          button.disabled = false
-        }, 750)
-      }, 500),
-    [],
-  )
-
   return (
     <div
       className={clsx(
@@ -572,13 +554,10 @@ export function Wires({ className }: { className?: string }) {
         />
         <SVGDefinitions />
       </svg>
-      <button
-        ref={backgroundRef}
-        tabIndex={-1}
-        onClick={onBackgroundClick}
-        aria-label={step === 2 ? "Show query again" : "Next step"}
-        className="absolute inset-0 outline-none"
-      />
+
+      {process.env.NODE_ENV === "development" && (
+        <NextStepButton onClick={inc} />
+      )}
 
       <div
         aria-hidden={step === 2}
@@ -877,3 +856,34 @@ function MobileDiagram({ step }: { step: number }) {
     </svg>
   )
 }
+
+const NextStepButton =
+  process.env.NODE_ENV === "development"
+    ? ({ onClick }: { onClick: () => void }) => {
+        const backgroundRef = useRef<HTMLButtonElement>(null)
+
+        const onBackgroundClick = useMemo(
+          () =>
+            throttle(() => {
+              const button = backgroundRef.current
+              if (!button) return
+              button.disabled = true
+              onClick()
+              setTimeout(() => {
+                button.disabled = false
+              }, 750)
+            }, 500),
+          [],
+        )
+
+        return (
+          <button
+            ref={backgroundRef}
+            tabIndex={-1}
+            onClick={onBackgroundClick}
+            aria-label="Next step"
+            className="absolute inset-0 outline-none"
+          />
+        )
+      }
+    : () => null

From e5786a8d326b4743025574809c62468ff43df42f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Mon, 18 Aug 2025 13:44:10 +0200
Subject: [PATCH 7/7] Rotate query sideways on small screens

---
 .../index-page/what-is-graphql/wires.module.css     |  9 +++++++++
 src/components/index-page/what-is-graphql/wires.tsx | 13 ++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/index-page/what-is-graphql/wires.module.css b/src/components/index-page/what-is-graphql/wires.module.css
index ab88c602b3..52b608861f 100644
--- a/src/components/index-page/what-is-graphql/wires.module.css
+++ b/src/components/index-page/what-is-graphql/wires.module.css
@@ -85,3 +85,12 @@
     transform: rotateX(-90deg) translateY(60px) translateZ(150px);
   }
 }
+
+@keyframes query-exit-sm {
+  from {
+    transform: rotateY(0deg) translateX(0px) translateZ(150px);
+  }
+  to {
+    transform: rotateY(90deg) translateX(60px) translateZ(150px);
+  }
+}
diff --git a/src/components/index-page/what-is-graphql/wires.tsx b/src/components/index-page/what-is-graphql/wires.tsx
index 426abdcd5f..963bf4efd3 100644
--- a/src/components/index-page/what-is-graphql/wires.tsx
+++ b/src/components/index-page/what-is-graphql/wires.tsx
@@ -561,17 +561,20 @@ export function Wires({ className }: { className?: string }) {
 
       <div
         aria-hidden={step === 2}
+        data-step={step}
         className={clsx(
           "pointer-events-none absolute inset-0 transition duration-[600ms]",
           styles.highlightsQuery,
           step === 2
-            ? "[transform:rotateX(90deg)_translateY(60px)_translateZ(150px)]"
-            : "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)]",
+            ? "[transform:rotateX(90deg)_translateY(60px)_translateZ(150px)] max-sm:[transform:rotateY(-90deg)_translateX(-60px)_translateZ(150px)]"
+            : "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)] max-sm:[transform:rotateY(0deg)_translateX(0px)_translateZ(150px)]",
+          "data-[step=2]:[animation:--animation] max-sm:data-[step=2]:[animation:--animation-sm]",
         )}
         style={
           {
+            "--animation": `${styles["query-exit"]} 600ms`,
+            "--animation-sm": `${styles["query-exit-sm"]} 600ms`,
             "--highlight-opacity": step === 1 ? 1 : 0,
-            animation: step === 2 ? `${styles["query-exit"]} 600ms` : undefined,
           } as React.CSSProperties
         }
       >
@@ -586,8 +589,8 @@ export function Wires({ className }: { className?: string }) {
           step === 2
             ? "[transform:rotateX(0deg)_translateY(0px)_translateZ(150px)]"
             : step === 1
-              ? "!duration-0 [transform:rotateX(90deg)_translateY(60px)_translateZ(150px)]"
-              : "[transform:rotateX(-90deg)_translateY(-60px)_translateZ(150px)]",
+              ? "!duration-0 [transform:rotateX(90deg)_translateY(60px)_translateZ(150px)] max-sm:[transform:rotateY(-90deg)_translateX(-60px)_translateZ(150px)]"
+              : "[transform:rotateX(-90deg)_translateY(-60px)_translateZ(150px)] max-sm:[transform:rotateY(90deg)_translateX(60px)_translateZ(150px)]",
         )}
       >
         <ResponseMdx components={components} />