Replace blur placeholder with opacity fade-in on hero screenshot (#278)

web/app/components/fade-image.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import Image, { type ImageProps } from "next/image";
+import { useState } from "react";
+
+export function FadeImage(props: ImageProps) {
+  const [loaded, setLoaded] = useState(false);
+
+  return (
+    <Image
+      {...props}
+      placeholder={undefined}
+      className={`${props.className ?? ""} transition-opacity duration-700 ${loaded ? "opacity-100" : "opacity-0"}`}
+      onLoad={() => setLoaded(true)}
+    />
+  );
+}

web/app/page.tsx

@@ -1,4 +1,4 @@
-import Image from "next/image";
+import { FadeImage } from "./components/fade-image";
 import Balancer from "react-wrap-balancer";
 import landingImage from "./assets/landing-image.png";
 import { TypingTagline } from "./typing";
@@ -117,11 +117,10 @@ export default function Home() {
 
         {/* Screenshot - break out of max-w-2xl to be wider */}
         <div data-dev="screenshot" className="mb-12 -mx-6 sm:-mx-24 md:-mx-40 lg:-mx-72 xl:-mx-96">
-          <Image
+          <FadeImage
             src={landingImage}
             alt="cmux terminal app screenshot"
             priority
-            placeholder="blur"
             className="w-full rounded-xl"
           />
         </div>