Homepage: Server Component + client splash island (cut hydration render-delay)

The data-URI logo still had LCP ~5s with zero network request, proving the
bottleneck is render delay (JS), not the image. So:
- page.tsx is now a Server Component. The hero, tagline, buttons, ServicesPreview,
  PortfolioGrid, and FounderSignature render as static server HTML (they had no
  client features, so they now hydrate to nothing).
- Splash state machine + header/nav/background gating + nebula position + scroll
  restoration moved into a small client island (home-shell.tsx) that takes the
  static content as children. Nebula reads the title via getElementById.
- Dedupe @types/react to 19 across the workspace (pnpm override) so the
  server->client children boundary type-checks.

apps/web/src/app/page.tsx

@@ -1,171 +1,77 @@
-"use client";
-
 import { PortfolioGrid } from "@/components/portfolio/bento-grid";
 import { ContactForm } from "@/components/contact/contact-form";
 import { FounderSignature } from "@/components/about/founder-signature";
 import { ServicesPreview } from "@/components/landing/services-preview";
-import { Header } from "@/components/layout/header";
-import { MobileNav } from "@/components/layout/mobile-nav";
-import { DynamicBackground } from "@/components/landing/dynamic-background";
-import { HeroSplash } from "@/components/landing/hero-splash";
 import { ScrollReveal } from "@/components/scroll-reveal";
+import { HomeShell } from "@/components/landing/home-shell";
 import { Button } from "@repo/ui/components/button";
 import Link from "next/link";
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
-
-// Avoid the "useLayoutEffect does nothing on the server" warning during SSR.
-const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 
+// Server Component: the hero and sections render as static server HTML. Only the
+// splash, header, nav, background (in HomeShell) and the scroll-reveal / contact
+// islands ship as client JS. ServicesPreview, PortfolioGrid, and FounderSignature
+// have no client features, so they hydrate to nothing.
 export default function Home() {
-  // The splash owns the first screen. Once the visitor scrolls through it (or hits
-  // "Explore"), we "enter" the site: the splash unmounts for good and the real hero,
-  // header, bottom nav, and background take over. Scrolling back up lands on the hero,
-  // never the splash again.
-  const [entered, setEntered] = useState(false);
-  // `splashUp` keeps the splash mounted through its fade-out; `leaving` triggers the
-  // cross-fade overlay (button path only).
-  const [splashUp, setSplashUp] = useState(true);
-  const [leaving, setLeaving] = useState(false);
-  const splashRef = useRef<HTMLElement>(null);
-  const restoreScroll = useRef(0);
-
-  // Respect prefers-reduced-motion: skip the splash entirely and land straight on
-  // the main hero, on desktop and mobile. Runs before paint, so the splash never
-  // flashes for these visitors.
-  useIsoLayoutEffect(() => {
-    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    // The splash is a one-time intro per session: once entered, a refresh (even
-    // from mid-page) skips it so you can't scroll back up into it.
-    const alreadyEntered = sessionStorage.getItem("such:entered") === "1";
-    if (reduced || alreadyEntered) {
-      setEntered(true);
-      setSplashUp(false);
-    }
-  }, []);
-
-  // Deliberately place the nebula/monitor just to the left of the hero title, at any
-  // screen width (restored from the original hero).
-  const titleRef = useRef<HTMLHeadingElement>(null);
-  const [nebulaPosition, setNebulaPosition] = useState<{ x: number; y: number } | null>(null);
-
-  // Dismiss the splash once it has fully scrolled out of view.
-  useEffect(() => {
-    if (entered) return;
-    const el = splashRef.current;
-    if (!el) return;
-    const io = new IntersectionObserver(
-      ([entry]) => {
-        if (!entry.isIntersecting) {
-          restoreScroll.current = Math.max(0, window.scrollY - el.offsetHeight);
-          sessionStorage.setItem("such:entered", "1");
-          setEntered(true);
-          setSplashUp(false); // scrolled past: just unmount, no overlay fade needed
-        }
-      },
-      { threshold: 0 },
-    );
-    io.observe(el);
-    return () => io.disconnect();
-  }, [entered]);
-
-  // After the splash unmounts, keep the visitor's position in the content stable
-  // (no jump). Runs before paint.
-  useIsoLayoutEffect(() => {
-    if (entered) window.scrollTo(0, restoreScroll.current);
-  }, [entered]);
-
-  // Compute the nebula position from the title. Recompute once entered (the title is
-  // now in its final on-screen position) and on resize / font load.
-  useEffect(() => {
-    const updatePosition = () => {
-      if (!titleRef.current) return;
-      const rect = titleRef.current.getBoundingClientRect();
-      const titleLeftPercent = (rect.left / window.innerWidth) * 100;
-      const titleTopPercent = (rect.top / window.innerHeight) * 100;
-      setNebulaPosition({
-        x: Math.max(5, titleLeftPercent - 8),
-        y: Math.max(10, titleTopPercent - 2),
-      });
-    };
-    updatePosition();
-    window.addEventListener("resize", updatePosition);
-    document.fonts?.ready.then(updatePosition);
-    return () => window.removeEventListener("resize", updatePosition);
-  }, [entered]);
-
-  const enterFromButton = () => {
-    restoreScroll.current = 0;
-    sessionStorage.setItem("such:entered", "1");
-    setEntered(true);
-    setLeaving(true);
-    // Keep the splash mounted briefly as a fixed, fading overlay so it cross-fades
-    // into the revealed content instead of hard-cutting.
-    setTimeout(() => setSplashUp(false), 800);
-  };
-
   return (
-    <main className="relative flex flex-col items-center overflow-hidden">
-      <DynamicBackground nebulaPosition={nebulaPosition} visible={entered} />
-      <Header floating visible={entered} />
+    <HomeShell>
+      <div
+        id="main-content"
+        className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-32 pb-10 px-4 text-center scroll-mt-28"
+      >
+        <h1
+          id="hero-title"
+          className="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-600 pb-2"
+          style={{ maxWidth: "min(calc(90vw - 120px), 100%)" }}
+        >
+          <span className="block">Precision Engineering</span>
+          <span className="block">for Everyone</span>
+        </h1>
+        <p className="max-w-2xl text-xl text-muted-foreground mb-8">
+          Custom e-commerce, websites, apps, and consulting. Plus our own mobile apps and games. A software studio in Kennett Square, PA.
+        </p>
 
-      {splashUp && <HeroSplash sectionRef={splashRef} onEnter={enterFromButton} leaving={leaving} />}
+        <div className="flex gap-4 mb-10">
+          <Link href="/products">
+            <Button size="lg" className="rounded-full">View Portfolio</Button>
+          </Link>
+          <Link href="#contact">
+            <Button variant="outline" size="lg" className="rounded-full">Start a Project</Button>
+          </Link>
+        </div>
 
-      <div id="main-content" className="z-10 w-full max-w-7xl mx-auto flex flex-col items-center pt-32 pb-10 px-4 text-center scroll-mt-28">
-         <h1
-           ref={titleRef}
-           className="text-4xl sm:text-5xl md:text-7xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-cyan-400 to-blue-600 pb-2"
-           style={{ maxWidth: "min(calc(90vw - 120px), 100%)" }}
-         >
-           <span className="block">Precision Engineering</span>
-           <span className="block">for Everyone</span>
-         </h1>
-         <p className="max-w-2xl text-xl text-muted-foreground mb-8">
-           Custom e-commerce, websites, apps, and consulting. Plus our own mobile apps and games. A software studio in Kennett Square, PA.
-         </p>
+        <ServicesPreview />
 
-         <div className="flex gap-4 mb-10">
-            <Link href="/products">
-              <Button size="lg" className="rounded-full">View Portfolio</Button>
-            </Link>
-            <Link href="#contact">
-               <Button variant="outline" size="lg" className="rounded-full">Start a Project</Button>
-            </Link>
-         </div>
+        <ScrollReveal className="w-full max-w-6xl mx-auto mb-16 px-4">
+          <div className="text-left mb-8 section-container border-l-4 border-l-blue-500">
+            <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Selected Works</h2>
+            <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
+              Recent projects spanning e-commerce, games, payment infrastructure, and interactive web applications.
+            </p>
+          </div>
+          <PortfolioGrid />
+        </ScrollReveal>
 
-         <ServicesPreview />
+        <ScrollReveal className="w-full max-w-6xl mx-auto mb-20 px-4">
+          <div className="text-left mb-12 section-container border-l-4 border-l-purple-500">
+            <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Inclusive by Design</h2>
+            <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
+              We believe the web is for everyone. Every line of code we write is
+              audited for WCAG 2.2 compliance and high-performance across all devices.
+            </p>
+          </div>
+          <FounderSignature />
+        </ScrollReveal>
 
-         <ScrollReveal className="w-full max-w-6xl mx-auto mb-16 px-4">
-            <div className="text-left mb-8 section-container border-l-4 border-l-blue-500">
-                <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Selected Works</h2>
-                <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
-                    Recent projects spanning e-commerce, games, payment infrastructure, and interactive web applications.
-                </p>
-            </div>
-            <PortfolioGrid />
-         </ScrollReveal>
-
-         <ScrollReveal className="w-full max-w-6xl mx-auto mb-20 px-4">
-            <div className="text-left mb-12 section-container border-l-4 border-l-purple-500">
-                <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Inclusive by Design</h2>
-                <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
-                    We believe the web is for everyone. Every line of code we write is
-                    audited for WCAG 2.2 compliance and high-performance across all devices.
-                </p>
-            </div>
-            <FounderSignature />
-         </ScrollReveal>
-
-         <ScrollReveal as="section" className="w-full mt-20 mb-20 pb-16 md:pb-0 flex flex-col items-center">
-            <div id="contact" className="w-full max-w-6xl text-left mb-12 section-container border-l-4 border-l-cyan-500">
-                <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Start a Project</h2>
-                <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
-                    Have a project in mind? Let's talk about what you need and how we can help.
-                </p>
-            </div>
-            <ContactForm />
-         </ScrollReveal>
+        <ScrollReveal as="section" className="w-full mt-20 mb-20 pb-16 md:pb-0 flex flex-col items-center">
+          <div id="contact" className="w-full max-w-6xl text-left mb-12 section-container border-l-4 border-l-cyan-500">
+            <h2 className="text-3xl font-bold mb-3 tracking-tight text-foreground">Start a Project</h2>
+            <p className="text-muted-foreground text-lg max-w-3xl leading-relaxed">
+              Have a project in mind? Let's talk about what you need and how we can help.
+            </p>
+          </div>
+          <ContactForm />
+        </ScrollReveal>
       </div>
-      <MobileNav visible={entered} />
-    </main>
+    </HomeShell>
   );
 }

apps/web/src/components/landing/home-shell.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { DynamicBackground } from "@/components/landing/dynamic-background";
+import { Header } from "@/components/layout/header";
+import { MobileNav } from "@/components/layout/mobile-nav";
+import { HeroSplash } from "@/components/landing/hero-splash";
+import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from "react";
+
+// Avoid the "useLayoutEffect does nothing on the server" warning during SSR.
+const useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+/**
+ * Client shell for the homepage. Owns the splash state machine, the entered-gating
+ * of the header / nav / background, the nebula position, and scroll restoration.
+ * The page itself is a Server Component and passes the static hero + sections in as
+ * `children`, so all of that renders as server HTML instead of shipping as client
+ * JS (smaller hydration tree = faster, more stable LCP).
+ */
+export function HomeShell({ children }: { children: ReactNode }) {
+  // The splash owns the first screen. Once the visitor scrolls through it (or hits
+  // "Explore"), we "enter" the site: the splash unmounts for good and the real hero,
+  // header, bottom nav, and background take over. Scrolling back up lands on the hero,
+  // never the splash again.
+  const [entered, setEntered] = useState(false);
+  // `splashUp` keeps the splash mounted through its fade-out; `leaving` triggers the
+  // cross-fade overlay (button path only).
+  const [splashUp, setSplashUp] = useState(true);
+  const [leaving, setLeaving] = useState(false);
+  const splashRef = useRef<HTMLElement>(null);
+  const restoreScroll = useRef(0);
+  const [nebulaPosition, setNebulaPosition] = useState<{ x: number; y: number } | null>(null);
+
+  // Respect prefers-reduced-motion: skip the splash entirely and land straight on
+  // the main hero, on desktop and mobile. Runs before paint, so the splash never
+  // flashes for these visitors.
+  useIsoLayoutEffect(() => {
+    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    // The splash is a one-time intro per session: once entered, a refresh (even
+    // from mid-page) skips it so you can't scroll back up into it.
+    const alreadyEntered = sessionStorage.getItem("such:entered") === "1";
+    if (reduced || alreadyEntered) {
+      setEntered(true);
+      setSplashUp(false);
+    }
+  }, []);
+
+  // Dismiss the splash once it has fully scrolled out of view.
+  useEffect(() => {
+    if (entered) return;
+    const el = splashRef.current;
+    if (!el) return;
+    const io = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) {
+          restoreScroll.current = Math.max(0, window.scrollY - el.offsetHeight);
+          sessionStorage.setItem("such:entered", "1");
+          setEntered(true);
+          setSplashUp(false); // scrolled past: just unmount, no overlay fade needed
+        }
+      },
+      { threshold: 0 },
+    );
+    io.observe(el);
+    return () => io.disconnect();
+  }, [entered]);
+
+  // After the splash unmounts, keep the visitor's position in the content stable
+  // (no jump). Runs before paint.
+  useIsoLayoutEffect(() => {
+    if (entered) window.scrollTo(0, restoreScroll.current);
+  }, [entered]);
+
+  // Place the nebula/monitor just to the left of the hero title, at any screen width.
+  // The title lives in the server-rendered children, so read it by id.
+  useEffect(() => {
+    const updatePosition = () => {
+      const title = document.getElementById("hero-title");
+      if (!title) return;
+      const rect = title.getBoundingClientRect();
+      const titleLeftPercent = (rect.left / window.innerWidth) * 100;
+      const titleTopPercent = (rect.top / window.innerHeight) * 100;
+      setNebulaPosition({
+        x: Math.max(5, titleLeftPercent - 8),
+        y: Math.max(10, titleTopPercent - 2),
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    document.fonts?.ready.then(updatePosition);
+    return () => window.removeEventListener("resize", updatePosition);
+  }, [entered]);
+
+  const enterFromButton = () => {
+    restoreScroll.current = 0;
+    sessionStorage.setItem("such:entered", "1");
+    setEntered(true);
+    setLeaving(true);
+    // Keep the splash mounted briefly as a fixed, fading overlay so it cross-fades
+    // into the revealed content instead of hard-cutting.
+    setTimeout(() => setSplashUp(false), 800);
+  };
+
+  return (
+    <main className="relative flex flex-col items-center overflow-hidden">
+      <DynamicBackground nebulaPosition={nebulaPosition} visible={entered} />
+      <Header floating visible={entered} />
+
+      {splashUp && <HeroSplash sectionRef={splashRef} onEnter={enterFromButton} leaving={leaving} />}
+
+      {children}
+
+      <MobileNav visible={entered} />
+    </main>
+  );
+}

package.json

@@ -24,6 +24,8 @@
   },
   "pnpm": {
     "overrides": {
+      "@types/react": "^19.2.14",
+      "@types/react-dom": "^19.2.3",
       "yaml": "^2.8.3",
       "flatted": "^3.4.2",
       "minimatch": "^9.0.7",

pnpm-lock.yaml

@@ -5,6 +5,8 @@ settings:
   excludeLinksFromLockfile: false
 
 overrides:
+  '@types/react': ^19.2.14
+  '@types/react-dom': ^19.2.3
   yaml: ^2.8.3
   flatted: ^3.4.2
   minimatch: ^9.0.7
@@ -19,8 +21,8 @@ importers:
   .:
     dependencies:
       '@types/react':
-        specifier: ^18.0.0
-        version: 18.3.27
+        specifier: ^19.2.14
+        version: 19.2.14
     devDependencies:
       eslint:
         specifier: ^9.0.0
@@ -136,10 +138,10 @@ importers:
     dependencies:
       '@radix-ui/react-slot':
         specifier: ^1.2.4
-        version: 1.2.4(@types/react@18.3.27)(react@18.3.1)
+        version: 1.2.4(@types/react@19.2.14)(react@18.3.1)
       '@types/react':
-        specifier: ^18.0.0
-        version: 18.3.27
+        specifier: ^19.2.14
+        version: 19.2.14
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -430,7 +432,7 @@ packages:
   '@mdx-js/react@3.1.1':
     resolution: {integrity: sha512-f++rKLQgUVYDAtECQ6fn/is15GkEH9+nZPM3MS0RcxVqoTfawHvDlSCH7JbMhAM6uJ32v3eXLvLmLvjGu7PTQw==}
     peerDependencies:
-      '@types/react': '>=16'
+      '@types/react': ^19.2.14
       react: '>=16'
 
   '@napi-rs/wasm-runtime@0.2.12':
@@ -514,7 +516,7 @@ packages:
   '@radix-ui/react-compose-refs@1.1.2':
     resolution: {integrity: sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^19.2.14
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -523,7 +525,7 @@ packages:
   '@radix-ui/react-slot@1.2.4':
     resolution: {integrity: sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA==}
     peerDependencies:
-      '@types/react': '*'
+      '@types/react': ^19.2.14
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -586,16 +588,10 @@ packages:
   '@types/node@20.19.30':
     resolution: {integrity: sha512-WJtwWJu7UdlvzEAUm484QNg5eAoq5QR08KDNx7g45Usrs2NtOPiX8ugDqmKdXkyL03rBqU5dYNYVQetEpBHq2g==}
 
-  '@types/prop-types@15.7.15':
-    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
-
   '@types/react-dom@19.2.3':
     resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
-      '@types/react': ^19.2.0
-
-  '@types/react@18.3.27':
-    resolution: {integrity: sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==}
+      '@types/react': ^19.2.14
 
   '@types/react@19.2.14':
     resolution: {integrity: sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==}
@@ -2981,18 +2977,18 @@ snapshots:
     dependencies:
       playwright: 1.57.0
 
-  '@radix-ui/react-compose-refs@1.1.2(@types/react@18.3.27)(react@18.3.1)':
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.14)(react@18.3.1)':
     dependencies:
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.27
+      '@types/react': 19.2.14
 
-  '@radix-ui/react-slot@1.2.4(@types/react@18.3.27)(react@18.3.1)':
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.14)(react@18.3.1)':
     dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@18.3.27)(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.14)(react@18.3.1)
       react: 18.3.1
     optionalDependencies:
-      '@types/react': 18.3.27
+      '@types/react': 19.2.14
 
   '@react-email/render@1.1.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
     dependencies:
@@ -3055,17 +3051,10 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
-  '@types/prop-types@15.7.15': {}
-
   '@types/react-dom@19.2.3(@types/react@19.2.14)':
     dependencies:
       '@types/react': 19.2.14
 
-  '@types/react@18.3.27':
-    dependencies:
-      '@types/prop-types': 15.7.15
-      csstype: 3.2.3
-
   '@types/react@19.2.14':
     dependencies:
       csstype: 3.2.3