Rebuild the homepage hero around live numbers, in-place search and a world map

[PArns]

The hero was a centred glass card: logo, static headline, a search box that opened a palette over the page, and a marquee of wait times along the bottom. It said what park.fan is; it did not show what park.fan knows right now.

The new hero is two columns over the same rotating photo. Both are panels — the same GlassCard variant="heavy", so they read as one material — and they are staggered, left pulled up and right pushed down, to give the search results room.

Left column: live numbers, an open search, nearby pills

The pill above the headline counts the parks open at this moment, and the intro sentence carries the park and attraction totals inline instead of the hardcoded "over 200 / 7,000+" it claimed before.

Both come from an hourly SSR seed that useGlobalStats replaces on mount and re-polls every five minutes, so the numbers end up fresher than the shell they used to be baked into while the homepage keeps its 1h ISR window. HeroStats fetches at revalidate: 3600 — anything lower would pin all six locale shells back to that value, which is the write regression documented in the caching doc.

The search is open at rest, listing the three nearest parks: the hero's default state is an answer, not an empty field. Focusing the field expands it to the full nearby list, tweened from the height it had. There is no closed state on desktop at all — Escape steps back one level (a query is cleared first, an already-empty field collapses back to three rows) and focus stays on the field either way.

It floats, so a growing list never moves the headline. Two things hold that together:

• Its resting height is reserved in the flow — measured from the card by a ResizeObserver, not hardcoded — so the nearby pills sit below the open list instead of underneath it. Only the resting height: typing past three rows grows the card over the pills, which fade out on focus anyway. Measured at the same viewport offset at rest, focused, and with 27 result rows on screen.
• The card is capped to the room left below the field, so a long result list ends at the bottom of the screen and scrolls inside itself rather than running off the page (970 px of a 1000 px viewport).

Both surfaces show the same things. useSearchResults (queries), useHeroBrowseParks (the pre-query list), useSearchNavigation (analytics + routing), SearchResultGroups, SearchBrowseGroup and SearchResultsPanel are shared, so a result cannot look or route differently depending on where it was clicked, and the mobile palette no longer offers a poorer starting list than desktop.

Before anything is typed the list shows nearby parks — open ones first, then by distance — with photo, live open-attraction count and average wait; or this park's rides when the visitor is inside one; or the popular parks when the nearby lookup and its GeoIP fallback both come up empty. The pills below the field show the same parks in the same order, from the same hook.

Search results get photos too: /v1/search knows nothing about our images, so the proxy resolves them from the media database the way /api/nearby already does, carrying the sidecar's focal point. Rows use the default image optimizer, not backgroundImageLoader — that one is tuned for full-bleed photos under gradient overlays (q50) and turns a 44 px thumbnail to mush.

Right column: the world map (xl and up)

One bubble per continent with its open-park count, the selected continent's countries as chips, and a link to the geo route. Clicking another continent switches the panel in place; clicking the selected one navigates to its continent route, and a chip to its country route. Chips say "7 geschlossen" rather than a bare "zu", and the panel lists every country a continent has, so the "11 Länder" in its subtitle matches what is on screen.

Below xl the column is hidden in CSS and only the skeleton's markup ships; the panel itself mounts after load + idle so it never competes with the hero photo for LCP. The text plate widens and centres itself there, since it no longer has a neighbour to sit beside.

public/world.svg is 152 KB of per-country paths and lib/utils/geo-svg.ts is server-only (fs), so scripts/generate-hero-world-map.mjs reduces it to one silhouette per continent (~38 KB, committed, not part of prebuild).

Worth knowing if you ever touch that script: the closed-ring Douglas-Peucker matters. The textbook open-polyline form takes first→last as its baseline, which for a closed ring is the same point — a degenerate baseline that collapses every country to a dot, with a perfectly green build. Look at the rendered map.

The first painted frame was wrong, and that was the flicker

useMediaQuery is false on the server and on the first client render. Choosing the search surface straight from it made the desktop hero paint the mobile trigger: a field carrying a ⌘K badge and a pulsing ring, both of which vanished a moment later when the real field replaced them. Below it sat an empty reserved gap that a whole card then dropped into.

Recorded with a MutationObserver over the hero plus screenshots through the load:

First paint (before)	A moment later
field with ⌘K badge + pulsing ring	a different field, neither present
empty reserved gap below it	a card drops in

Both viewports now start on the same neutral shell, which looks like the final field exactly, and the resting dropdown is drawn as a skeleton in the same breath — hidden md:block, so CSS decides rather than a hook, and the server already renders the right thing for either viewport. The first frame is now the finished composition with placeholders in it; everything after that is content filling boxes that do not move.

Every other live surface follows the same rule. The pill row's height no longer depends on its contents, and the open-parks pill is one element whose content swaps rather than a skeleton replaced by a badge — two elements measured a small but real shift even at identical heights.

Measured CLS is 0 on desktop and on a throttled phone (down from 0.0147), LCP 1.3–1.6 s under 4× CPU + slow-3G throttling.

Motion: CSS for entrances, GSAP for interaction

The entrance is a CSS keyframe, and that split is deliberate. An entrance has to own the very first painted frame; a lazily-loaded library cannot. Either the hero paints and is hidden again when the library arrives — a flash — or it stays blank until the chunk lands. I built it with GSAP first and measured exactly that, so animation-fill-mode: both supplies the hidden start state with no JavaScript and no path where a failed chunk leaves the hero invisible.

The plates rise out of a barely-there scale, the left plate's contents follow one at a time (keyed off nth-child, so no component needs to know its position), and the map's continent bubbles grow out of the map — that last one on arrival only, since switching continents remounts two bubbles and a pop there would fire on exactly the two the visitor is looking at.

GSAP drives interactions: the continent switch (the chip row is replaced wholesale, and a staggered flick-in reads as the panel answering the click), the dropdown's expand-on-focus (the content swaps in one render, so there is nothing for CSS to interpolate towards height: auto), and the header's stagger when the bar solidifies. That last one is layered on top of the existing CSS crossfade, which stays the source of truth — backdrop-filter is deliberately kept out of its transition list, because animating it re-rasterized the blur of the whole page behind the bar on every frame. It plays once per page, not once per scroll: the 50 px threshold is crossed every time the visitor scrolls up and back down.

Everything bails out entirely under prefers-reduced-motion — no animation, not a shortened one. Verified at both settings.

The hero was re-blurring itself on every frame

With the hero on screen at 6× CPU throttle, frames took 50 ms — 125 of 140 over 20 ms. The photo runs an infinite ken-burns transform, and 25 backdrop-filter layers sat over it; every animation frame invalidates every backdrop above it. Twenty-two were pills, country chips, continent bubbles and the open-now badge — all on panels that are already a solid surface, where a filter of their own buys nothing. They are plain translucent fills now.

	median frame	frames > 20 ms
before	50.0 ms	125 / 140
shipped, desktop 1600	66.7 ms	115 / 119
shipped minus the left plate's blur	50.0 ms	113 / 119
shipped, mobile 390	16.7 ms	0 / 129
no backdrop filter at all	16.7 ms	1 / 129

Both plates carry the glass, which is the single most expensive filter on the page — the left one is the largest surface. Two things worth knowing before tuning it: the radius is not the lever (64 px, 24 px and 12 px all measure the same, which is also why matching the two panels cost nothing), and the animation is — with ken-burns stopped, every filter on the page costs nothing, because a static backdrop is filtered once and cached. So the trade is: slow zoom on the photo, or unlimited glass. Mobile is unaffected either way.

prefers-reduced-motion now actually stops ken-burns, which takes that cost to zero for those visitors. It was an inline style={{animation}}, which no motion-reduce: utility and no media query can override — so the one switch that would have removed this cost did nothing for the people most likely to need it.

The scrim is gone, and the photo came forward

A left-anchored gradient used to dim the left half of the hero. It existed because the text plate had no backdrop blur, and it was anchored left so the photo still read on the right — which, once the plate got real glass, meant the two panels were blurring different backdrops: the left a dimmed one, the right the raw photo. Same 64 px filter, visibly different glass.

Removing it also removes a full-viewport paint, and it was carrying no legibility load: the hero text measures 12.96:1 over the real photo without it, and 21:1 against a forced-white photo.

That headroom is why the photo can come forward. Light mode washed it with 60% white at the top-left and held the image at 90% opacity, both from the era when text sat directly on it; it is a 25% tint and full opacity now. Dark mode keeps its heavier gradient — that is what makes the night shots read as night.

What else changed

The blog strip below the hero is now a real strip: full container width, three cards with their cover photo at 16:9, the post's own opening lines, and reading time on a shared baseline. It was three thumbnails with truncated titles.

Removed	Where it lives now
Wait-times marquee (live-wait-ticker, hero-ticker)	The nearby pills replace it. /api/analytics/ticker stays — the admin dashboard uses it
Big hero logo, howto + glossary buttons	Header and footer still link both; the About section keeps the howto link

Bugs the green build hid

Found by review and by driving the thing in a browser:

Search

• The shell → panel hand-off always dropped the typed text: focus fires before the first keystroke, and the "first call wins" latch froze the value at "".
• The panel stole focus unconditionally on mount — scrolling away mid-load yanked the page back up, and it re-fired on every breakpoint crossing.
• Type-anywhere preventDefault'd Space, so Space stopped scrolling the page and stopped activating focused buttons. It also relocated focus on any letter key from whatever the visitor was on, breaking first-letter navigation; it only fires when nothing is focused now.
• The field called itself an expanded combobox at all times. cmdk hard-codes aria-expanded="true" and an aria-controls pointing at its list — after spreading our props, so a prop cannot win — and this surface then unmounted the list when closed, leaving the reference dangling. The list is hidden rather than unmounted now, which is the actual combobox pattern and costs no paint.
• Escape ballooned the card to its cap and snapped back. query empties immediately while debouncedQuery holds the old term for another 300 ms, and the results branch keyed off one while the browse branch keyed off the other — so for that window the card rendered the full result list and the browse list. Both now require the two to agree.
• Escape dropped focus to <body>; it stays on the field.

Map

• The Africa landmass was styled as clickable and did nothing: the map draws six continents, the API returns only those with parks. Inert now.
• Continent bubbles were aria-pressed buttons that navigate when re-pressed, announcing a toggle that never un-toggles. The selected one is a link, the others stay buttons.
• Switching continents replaced the heading, the open/total figure and the whole chip row with nothing announced. The header is aria-live now.
• The bubbles faded in offset and snapped into place a second later. Tailwind v4 compiles -translate-x-1/2 to the standalone translate property, not to transform, so the keyframe's transform: translate(-50%,-50%) scale(…) composed on top of it and moved every bubble a second time. The keyframe animates the standalone scale now and leaves translate alone.

Elsewhere

• --status-operating was 4.39:1 on white, so every small "N offen" set in it missed AA (4.33:1 on the hero pill, 4.37:1 on a country chip). Lightness 0.55 → 0.53 is 4.74:1 and reads as the same green. Token-wide on purpose — other components already use it as small text.
• The popular-parks fallback painted five green "operating" dots for parks it has no live status for, and its URL-less rows closed the dropdown on a click that navigated nowhere.
• ES/FR/IT country chips had no plural form: "1 abiertos", "1 ouverts", "1 aperti".
• The German intro used a construction German does not have ("an … mitzählen") and dropped the article in "bis Magic Kingdom"; the world panel's subtitle said "anderen Kontinent anklicken", which is missing its article. All six locales now say the equivalent of "switch continent".
• search.avgWait shipped the German Ø to all six locales, next to an existing localized key saying the same thing.
• Duplicate React key in the world-panel skeleton.

Checks

• pnpm build — green; /[locale] still reports 1h in the revalidate column
• pnpm release:check — lint, format, translations (all six locales in sync), client-message namespaces
• Driven in a real browser against the production build at 1600 / 1440 / 1280 / 1279 / 1100 / 1024 / 768 / 390 in light and dark: the resting dropdown lists three parks with the pills below it, focusing expands it to five without moving the pills, a long query keeps the card inside the viewport and scrolls internally, Escape settles without overshoot, continent switching updates the panel, the plate is centred below xl with equal gutters, no horizontal overflow at 390, no console errors
• Combobox ARIA verified in all three states, Escape keeps focus on the field, a letter key no longer steals focus from a focused link, prefers-reduced-motion reports animation-name: none for ken-burns and every entrance, and the map bubbles hold one position through their whole animation (0 px drift over 2.4 s)

On the red impeccable detector checks earlier in this PR: both were GitHub Actions infrastructure, not this code. The job never reached checkout — Failed to resolve action download info. Error: Service Unavailable, retried twice, then failed — which also explains the 15-minute hang before it. The workflow is non-blocking by design (continue-on-error, "the check always succeeds"). Run locally against this branch it finishes in seconds with exactly one finding, in components/marketing/scroll-reveal.tsx, a file this PR does not touch.

Best reviewed on the preview deployment — the map, the search and the pills are all live-data surfaces that a diff cannot show.

🤖 Generated with Claude Code

https://claude.ai/code/session_012y3NUKjqx4ZxrCseyCDXeQ

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
park.fan	Ready	Preview	Aug 6, 2026 9:45pm