wip

Author: hasparus

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

@@ -40,7 +40,8 @@
       );
     }
     &:nth-child(5),
-    &:nth-child(6) {
+    &:nth-child(6),
+    &:nth-child(7) {
       @apply bg-sec-light/20 dark:bg-sec-light/5;
     }
   }
@@ -59,7 +60,7 @@
       @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;
+      @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 oklch,
         var(--tw-gradient-stops)
@@ -68,7 +69,7 @@
     &:nth-child(7),
     &:nth-child(8),
     &:nth-child(9) {
-      @apply bg-sec-lighter/20 dark:bg-sec-light/5;
+      @apply bg-sec-light/20 dark:bg-sec-light/5;
     }
   }
 }

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

@@ -496,6 +496,10 @@ export function Wires({ className }: { className?: string }) {
     return () => animate?.removeEventListener("repeatEvent", inc)
   }, [])
 
+  useEffect(() => {
+    document.addEventListener("click", inc)
+  }, [])
+
   return (
     <div className={clsx(className, "relative isolate", classes.wires)}>
       <svg
@@ -517,12 +521,11 @@ export function Wires({ className }: { className?: string }) {
       </svg>
       <div
         className={clsx(
-          "absolute inset-0 transition-opacity",
+          "absolute inset-0 transition duration-[5s]",
           classes.highlightsQuery,
         )}
         style={{
-          opacity: step < 2 ? 1 : 0,
-          transitionDelay: step < 2 ? "0s" : "0.5s",
+          transform: step < 2 ? "translateY(0)" : "translateY(-100%)",
           ...(step === 1 && {
             "--highlight-opacity": 1,
           }),
@@ -532,12 +535,11 @@ export function Wires({ className }: { className?: string }) {
       </div>
       <div
         className={clsx(
-          "absolute inset-0 transition-opacity [&>pre]:bg-neu-0",
+          "absolute inset-0 transition duration-[5s] [&>pre]:bg-neu-0",
           classes.highlightsResponse,
         )}
         style={{
-          opacity: step === 2 ? 1 : 0,
-          transitionDelay: step === 2 ? "0s" : "0.5s",
+          transform: step === 2 ? "translateY(0)" : "translateY(100%)",
         }}
       >
         <ResponseMdx components={components} />