From be1acbc221cc6db3f6bea0e86d62e394218bcb7b Mon Sep 17 00:00:00 2001
From: Amruth Pillai <im.amruth@gmail.com>
Date: Sun, 5 Jul 2026 21:07:34 +0200
Subject: [PATCH] perf(home): eliminate hero CLS from unreserved video box

The hero <section> is `flex items-center` (shrink-to-fit), so the video
wrapper's width depended on the video's intrinsic size, which only resolves
after the media loads. aspect-ratio couldn't reserve height without a definite
width, so the video grew from ~190px to ~563px after first paint and shoved the
centered hero text down ~373px (CLS ~0.095).

Give the wrapper a definite width (w-full + mx-auto on the CometCard) and set an
explicit aspect ratio + width/height on the video so its box is reserved before
load. CLS 0.095 -> 0; hero stays visually centered at max-w-4xl.
---
 apps/web/src/routes/_home/-sections/hero.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/routes/_home/-sections/hero.tsx b/apps/web/src/routes/_home/-sections/hero.tsx
index af9ac0ace..1f3b7cb3d 100644
--- a/apps/web/src/routes/_home/-sections/hero.tsx
+++ b/apps/web/src/routes/_home/-sections/hero.tsx
@@ -17,20 +17,27 @@ export function Hero() {
 			<Spotlight />
 
 			<m.div
-				className="will-change-[transform,opacity]"
+				className="w-full will-change-[transform,opacity]"
 				initial={{ opacity: 0, y: 100 }}
 				animate={{ opacity: 1, y: 0 }}
 				transition={{ duration: 1.1, ease: "easeOut" }}
 			>
-				<CometCard glareOpacity={0} className="relative -mb-12 3xl:max-w-7xl max-w-4xl px-8 md:-mb-24 md:px-12 lg:px-0">
+				<CometCard
+					glareOpacity={0}
+					className="relative mx-auto -mb-12 3xl:max-w-7xl max-w-4xl px-8 md:-mb-24 md:px-12 lg:px-0"
+				>
 					<video
 						loop
 						muted
 						autoPlay
 						playsInline
+						width={1146}
+						height={720}
 						src="/videos/timelapse.mp4"
 						aria-label={t`Timelapse demonstration of building a resume with Reactive Resume`}
-						className="pointer-events-none size-full rounded-md border object-cover"
+						// Reserve the intrinsic aspect ratio so the box height is known before the video
+						// metadata loads — otherwise it reflows the centered hero column and causes CLS (~0.10).
+						className="pointer-events-none aspect-[1146/720] w-full rounded-md border object-cover"
 					/>
 
 					<div