From d2ec2a0f916c19e98ba8f26c5e6076b39a5fbbc1 Mon Sep 17 00:00:00 2001
From: Chad Curtis <chad@chadwick.site>
Date: Sun, 24 May 2026 20:57:17 -0500
Subject: [PATCH] Trim hero map viewBox to land-bearing latitudes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The full equirectangular viewBox (-90..+90 lat) leaves a tall empty
ocean band at the bottom of the hero on wide viewports. Antarctica's
coastline only reaches ~lat -75 around its perimeter, so the bottom
~5° of the viewBox is always empty. Trim to -85..+85 so 'slice' fills
the hero with land texture instead of empty space. No distortion —
preserveAspectRatio still scales uniformly.
---
 src/components/HeroLightningMap.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/HeroLightningMap.tsx b/src/components/HeroLightningMap.tsx
index 490a8ab3..88ffc1f6 100644
--- a/src/components/HeroLightningMap.tsx
+++ b/src/components/HeroLightningMap.tsx
@@ -28,11 +28,18 @@ function HeroLightningMapImpl({ className }: { className?: string }) {
   const uid = useId();
   const arcId = (key: string) => `${uid}-${key}`;
 
-  // viewBox is the equirectangular world: 360 wide × 180 tall, recentered
-  // so (0,0) is the geographic origin. We project [lng, lat] -> [lng, -lat]
-  // (SVG y grows downward).
+  // viewBox: equirectangular world projected as [lng, -lat] (SVG y grows
+  // downward). We keep the full 360° of longitude but trim the polar
+  // bands slightly. The full lat range (-90..+90) leaves a noticeable
+  // empty gutter at the bottom of the hero on wide viewports — Antarctica's
+  // coastline only reaches ~lat -75 around its perimeter and below that
+  // the projection is just empty ocean. Pulling the viewBox in to roughly
+  // the populated band (lat -LAT_RANGE..+LAT_RANGE) lets `slice` fill the
+  // hero with land texture instead of empty space, without distorting any
+  // geography — `preserveAspectRatio` still scales uniformly.
   const W = 360;
-  const H = 180;
+  const LAT_RANGE = 85; // viewBox covers latitudes -85..+85
+  const H = LAT_RANGE * 2;
 
   const landPaths = useMemo(() => {
     return LAND_RINGS.map((ring, idx) => {