Try optimizing the hero blur

Author: hasparus

public/images/next-image-export-optimizer-hashes.json

@@ -52,7 +52,7 @@
     "/annual-report-1.5ebe2b34.png": "HmbFFbaUL79rvnCKQ-2oRSLETM2FFh5v5dZxwWquuVM=",
     "/audience.f60c1c99.jpg": "pqx3E31xAO87mNEBlZKqCTX+LRiPlOuQThWQZf08A4A=",
     "/banner.10d4d66b.jpg": "9UJqBQ9RQu2sxDdJ5uaQr3crx2ZXrlOKMAmY82R8ZBA=",
-    "/blur-bean-cropped.62af4aa2.webp": "rdPhhzi5e+RLv-u0B-uPkp-eCYnyGlO84Yn0zCLLG4c=",
+    "/-cropped.62af4aa2.webp": "rdPhhzi5e+RLv-u0B-uPkp-eCYnyGlO84Yn0zCLLG4c=",
     "/blur-bean.21b930bd.webp": "eTUigN2JSyvccNXMnRwneZJ1YIeNnrVs3klseGSUa7o=",
     "/blur-bean.314cdc4a.webp": "YAysN2NZeYYWHNI8cFCabzsTifCknmbp-r+P1LAs1bE=",
     "/blur-bean.d5aa6d13.webp": "30xrtHSB6py7q6r2HxdKzm4gt8WoCiWRownamqyf3wM=",
@@ -189,4 +189,4 @@
     "/uri.387cb001.jpg": "kSx4huEjQidwIg6bF8UEWLiPACDl0nQ0aqxA2R2LIe0=",
     "/whiteboard.60eac8e3.jpg": "NodBqUaO+IanhuPaP9o5jCIe+gSrwyZ9TZ3QUdlWbBg=",
     "/workshop.e02e3501.jpg": "D9ON1z6-vKcjxv50gOH+5XS9HTEWUpc4UgIPW5OXHxE="
-}
+}

src/components/index-page/hero/index.tsx

@@ -57,8 +57,8 @@ function HeroStripes() {
         image={logoBlurred}
         className="relative h-full bg-gradient-to-b from-pri-base to-pri-lighter opacity-0 transition-opacity duration-[1.5s] [mask-position:center_12%] [mask-size:110%] data-[loaded=true]:opacity-100 dark:to-pri-base sm:[mask-size:auto_300%] lg:[mask-position:7%_7%] lg:[mask-size:200%]"
         style={{
-          maskImage: `url(${logoBlurred.src})`,
-          WebkitMaskImage: `url(${logoBlurred.src})`,
+          maskImage: `var(--src)`,
+          WebkitMaskImage: `var(--src)`,
           maskRepeat: "no-repeat",
           WebkitMaskRepeat: "no-repeat",
         }}

src/components/index-page/how-it-works/index.tsx

@@ -22,19 +22,28 @@ export function HowItWorks() {
   const inView = useInView(sectionRef)
 
   return (
-    <section ref={sectionRef} className="gql-container gql-section xl:py-20">
+    <section
+      ref={sectionRef}
+      className="gql-container gql-section xl:py-20"
+      // this is mostly for Playwright, we're not getting a hydration warning normally
+      suppressHydrationWarning
+    >
       <SectionLabel className="mb-6">How it works</SectionLabel>
       <h2 className="typography-h2 mb-6 lg:mb-16">A GraphQL Query</h2>
-      {/* todo: we need to wrap this in a vertical scrollview with max width about 420px as we now use position: absolute for dynamic content */}
       <div className="relative">
         <ol className="gql-radial-gradient list-none gap-px max-md:bg-gradient-to-r max-md:from-transparent max-md:via-neu-400 max-md:to-transparent lg:grid lg:grid-cols-3">
           <HowItWorksListItem text="Describe your data" code={<CodeA />} />
           <HowItWorksListItem
+            inert={inView}
             text="Ask for what you want"
-            icon={<PlayButton />}
+            icon={<PlayButton disabled={inView} />}
             code={<CodeB />}
           />
-          <HowItWorksListItem text="Get predictable results" code={<CodeC />} />
+          <HowItWorksListItem
+            inert={inView}
+            text="Get predictable results"
+            code={<CodeC />}
+          />
         </ol>
         {inView && (
           <ol

src/components/index-page/how-it-works/play-button.tsx

@@ -4,7 +4,7 @@ import { Button } from "../../../app/conf/_design-system/button"
 export function PlayButton({
   className,
   ...props
-}: React.HTMLAttributes<HTMLButtonElement>) {
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
   return (
     <Button
       variant="tertiary"
@@ -13,11 +13,12 @@ export function PlayButton({
         className,
       )}
       onClick={props.onClick}
+      disabled={props.disabled}
     >
       <svg fill="currentColor" viewBox="0 0 24 24" className="size-4">
         <path d="M10 20H8V4h2v2h2v3h2v2h2v2h-2v2h-2v3h-2v2z" />
       </svg>
-      <span className="sr-only">Run query</span>
+      {!props.disabled && <span className="sr-only">Run query</span>}
     </Button>
   )
 }

src/components/interactive-code-block/mini-graphiQL.tsx

@@ -94,7 +94,10 @@ export default class MiniGraphiQL extends Component<
     )
 
     return (
-      <div className="[&:not(:first-child)]:_mt-6 grid grid-cols-2 border border-neu-200 text-sm dark:border-neu-50">
+      <div
+        className="[&:not(:first-child)]:_mt-6 grid grid-cols-2 border border-neu-200 text-sm dark:border-neu-50"
+        suppressHydrationWarning
+      >
         {Object.keys(this.state.variableToType).length > 0 ? (
           <div className="flex flex-col">
             {editor}