From 64bb248f202802add61a6fa6d844749d78b7c7bf Mon Sep 17 00:00:00 2001
From: Lawrence Chen <54008264+lawrencecchen@users.noreply.github.com>
Date: Sat, 21 Feb 2026 06:24:59 -0800
Subject: [PATCH] Replace blur placeholder with opacity fade-in on hero
 screenshot (#278)

---
 web/app/components/fade-image.tsx | 17 +++++++++++++++++
 web/app/page.tsx                  |  5 ++---
 2 files changed, 19 insertions(+), 3 deletions(-)
 create mode 100644 web/app/components/fade-image.tsx

diff --git a/web/app/components/fade-image.tsx b/web/app/components/fade-image.tsx
new file mode 100644
index 00000000..4813f56a
--- /dev/null
+++ b/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)}
+    />
+  );
+}
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 525d6275..566d6c68 100644
--- a/web/app/page.tsx
+++ b/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>