Make the step transition nice

Author: hasparus

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

@@ -0,0 +1,9 @@
+.wires {
+  & rect,
+  & path {
+    transition:
+      fill 1s linear,
+      stroke 1s linear,
+      opacity 1s linear;
+  }
+}

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

@@ -15,9 +15,23 @@ import {
 
 import QueryMdx from "./api-gateway-query.mdx"
 import clsx from "clsx"
-import { ComponentPropsWithoutRef, ReactNode, useReducer } from "react"
+import {
+  ComponentPropsWithoutRef,
+  ReactNode,
+  useEffect,
+  useReducer,
+  useRef,
+} from "react"
+
+import classes from "./wires.module.css"
 
-function ClientEdges({ highlighted }: { highlighted?: number }) {
+function ClientEdges({
+  highlightedEdge,
+  highlightedVisible,
+}: {
+  highlightedEdge?: number
+  highlightedVisible: boolean
+}) {
   const paths = [
     "M514.5 220H424.5V76H72",
     "M446 220H424.5V112H144",
@@ -33,25 +47,38 @@ function ClientEdges({ highlighted }: { highlighted?: number }) {
   return (
     <>
       {moveHighlightedToTop(
-        highlighted,
+        highlightedEdge,
         paths.map((path, index) => (
-          <path
-            key={index}
-            d={path}
-            stroke={
-              highlighted === index
-                ? `url(#paint_lr_dark_linear_671_9150)`
-                : `url(#paint_lr_light_linear_671_9150)`
-            }
-            strokeWidth={highlighted === index ? "2" : "1"}
-          />
+          <>
+            <path
+              key={index}
+              d={path}
+              stroke="url(#paint_lr_light_linear_671_9150)"
+              strokeWidth="1"
+            />
+            {highlightedEdge === index && (
+              <path
+                key={index + "h"}
+                d={path}
+                stroke="url(#paint_lr_dark_linear_671_9150)"
+                strokeWidth="2"
+                className={highlightedVisible ? "opacity-100" : "opacity-0"}
+              />
+            )}
+          </>
         )),
       )}
     </>
   )
 }
 
-function ServerEdges({ highlighted }: { highlighted: number[] }) {
+function ServerEdges({
+  highlighted,
+  highlightedVisible,
+}: {
+  highlighted: number[]
+  highlightedVisible: boolean
+}) {
   const paths = [
     "M696 159.5H811.5V75H1176",
     "M696 175.5L833.5 175.5V112H1104.5",
@@ -69,18 +96,27 @@ function ServerEdges({ highlighted }: { highlighted: number[] }) {
       {paths.map((d, index) => {
         const isHighlighted = highlighted?.includes(index)
         return (
-          <path
-            key={index}
-            d={d}
-            strokeWidth={isHighlighted ? 2 : 1}
-            className={clsx(
-              isHighlighted
-                ? 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)]"
-                : "stroke-[url(#paint_sr_light_linear_671_9150)]",
+          <>
+            <path
+              key={index}
+              d={d}
+              strokeWidth={1}
+              className="stroke-[url(#paint_sr_light_linear_671_9150)]"
+            />
+            {isHighlighted && (
+              <path
+                key={index + "h"}
+                d={d}
+                strokeWidth={2}
+                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)]",
+                )}
+              />
             )}
-          />
+          </>
         )
       })}
     </>
@@ -89,7 +125,6 @@ function ServerEdges({ highlighted }: { highlighted: number[] }) {
 
 function Box({
   transform,
-  fill = "hsl(var(--color-neu-100))",
   children,
   className,
 }: {
@@ -102,11 +137,11 @@ function Box({
     <g
       transform={transform}
       className={clsx(
-        "[&>path]:translate-x-4 [&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600",
+        "fill-neu-100 [&>path]:translate-x-4 [&>path]:translate-y-4 [:where(&>path:not([fill]))]:fill-neu-600",
         className,
       )}
     >
-      <rect width="56" height="56" fill={fill} />
+      <rect width="56" height="56" />
       {children}
     </g>
   )
@@ -142,7 +177,7 @@ function ClientBoxes({ highlighted }: { highlighted?: number }) {
             }
             className={
               isHighlighted
-                ? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0"
+                ? "[&_path]:fill-neu-800 dark:[&_path]:fill-neu-0 dark:[&_rect]:fill-neu-400"
                 : undefined
             }
           >
@@ -177,18 +212,11 @@ function ServerBoxes({ highlighted }: { highlighted: number[] }) {
           <Box
             key={index}
             transform={transform}
-            fill={
-              isHighlighted
-                ? index % 2
-                  ? "hsl(var(--color-pri-lighter))"
-                  : "hsl(var(--color-sec-light))"
-                : "hsl(var(--color-neu-100))"
-            }
             className={
               isHighlighted
                 ? index % 2
-                  ? "dark:[&_path]:fill-pri-lighter [&_rect]:fill-pri-darker"
-                  : "dark:[&_path]:fill-sec-lighter [&_rect]:fill-sec-darker"
+                  ? "fill-pri-lighter [&_path]:fill-pri-darker dark:[&_path]:fill-pri-lighter dark:[&_rect]:fill-pri-darker"
+                  : "fill-sec-light [&_path]:fill-sec-darker dark:[&_path]:fill-sec-lighter dark:[&_rect]:fill-sec-darker"
                 : undefined
             }
           >
@@ -200,7 +228,6 @@ function ServerBoxes({ highlighted }: { highlighted: number[] }) {
   )
 }
 
-// SVG gradients and definitions
 function SVGDefinitions() {
   return (
     <defs>
@@ -222,8 +249,40 @@ function SVGDefinitions() {
           className="dark:[stop-color:hsl(var(--color-neu-100))]"
         />
       </linearGradient>
+      <linearGradient id="paint_lr_dark_linear_671_9150">
+        <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"
+            dur="10s"
+            repeatCount="indefinite"
+          />
+        </stop>
+        <stop stopColor="hsl(var(--color-neu-700))">
+          <animate
+            attributeName="offset"
+            values="-1.562;2.438;-1.562"
+            dur="10s"
+            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"
+            dur="10s"
+            repeatCount="indefinite"
+          />
+        </stop>
+      </linearGradient>
       <linearGradient
-        id="paint_lr_dark_linear_671_9150"
+        id="paint_lr_dark_linear_static_671_9150"
         x1="446"
         y1="-17.6347"
         x2="204.096"
@@ -369,13 +428,26 @@ const components = {
 }
 
 export function Wires({ className }: { className?: string }) {
-  const STEPS = 3
-  const [step, inc] = useReducer(x => (x + 1) % STEPS, 1)
+  const STEPS = 2
+  const [step, inc] = useReducer(x => (x + 1) % STEPS, 0)
 
-  // TODO: Increment from 0 to 1 and 1 to 2 on `repeatEvent` in client and server edges.
+  const ref = useRef<SVGSVGElement>(null)
+
+  useEffect(() => {
+    const animate = document.querySelector(
+      "#paint_sr_pri_highlight_linear_671_9150 animate",
+    )
 
+    if (animate && animate instanceof SVGAnimateElement) {
+      animate.addEventListener("repeatEvent", inc)
+    }
+
+    return () => animate?.removeEventListener("repeatEvent", inc)
+  }, [])
+
+  // TODO: Increment from 0 to 1 and 1 to 2 on `repeatEvent` in client and server edges.
   return (
-    <div className={clsx(className, "relative")}>
+    <div className={clsx(className, "relative", classes.wires)}>
       <svg
         id="what-is-graphql--wires"
         width="1248"
@@ -385,10 +457,11 @@ export function Wires({ className }: { className?: string }) {
         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"
+        ref={ref}
       >
-        <ClientEdges highlighted={step === 0 ? 0 : undefined} />
+        <ClientEdges highlightedEdge={0} highlightedVisible={step === 0} />
         <ClientBoxes highlighted={step === 0 ? 0 : undefined} />
-        <ServerEdges highlighted={step === 1 ? [1, 6] : []} />
+        <ServerEdges highlighted={[1, 6]} highlightedVisible={step === 1} />
         <ServerBoxes highlighted={step === 1 ? [1, 6] : []} />
         <SVGDefinitions />
       </svg>