[ronload]

Why

The home page was a tool with a map beside it. On desktop the brand, GitHub link and theme toggle sat in a card above the form (mobile had a separate header), and the map stayed a static overview of Taiwan until a city was picked. It worked, but it did not read as a landing page, and the map had nothing to show before the first input.

This turns the page into a split hero in the style of ui.spectrumhq.in: headline and tool on the left, an animated map on the right, faded where the two meet. The form still comes right after the headline, so a result is as close as before.

Changes

All changes are in apps/web; packages/core and the vendored components/ui/* are untouched.

Hero layout and header (25f470f)

• Left column: a corner-bracket badge linking the Chunghwa Post data source, the headline, then the form and result. They enter with a short staggered fade-up (enter-fx), reduced to a plain fade under prefers-reduced-motion.
• The map panel (still lg and up) is no longer a grid cell. It spans from 42% of the container to the viewport's right edge and sticks under the header, sized to the viewport so the camera only frames what is on screen.
• The canvas fades into the page through a CSS mask (map-fade) rather than background-colored overlays, which hid the page glow behind the map and left a visible seam. Only the canvas is masked; the focus label and zoom controls stay crisp.
• One header at every breakpoint (logo and wordmark linking home, GitHub, theme toggle) replaces the desktop-only card.
• New BracketBadge and SectionLabel components, and a --mark accent color for the corner marks.

Spotlight map (5d08445)

• Everything outside the focus is dimmed. With nothing selected, the map tours the counties on its own. The tour pauses while the pointer or keyboard focus is on the map, or while the page is hidden, and resumes about 2s after that ends.
• Selecting a city or district moves the spotlight there, flies the camera to it (max zoom 11 for counties, 13 for districts) and labels it with a corner mark.
• The dimming is feature state on a single GeoJSON source: a world polygon with Taiwan cut out, plus every county and district. Each feature tweens between fully clear and fully opaque (FeatureStateTweener) under one layer opacity, so overlapping county and district masks never stack and shared borders leave no seams.
• Framing ignores islets under 1% of a region's largest landmass, so the Wuqiu islets no longer pull the camera from Kinmen out to sea.
• The canvas stays hidden until the spotlight is drawn, on first load and while a theme switch restyles the basemap, so neither the previous basemap nor an unmasked map flashes. A 2s timeout reveals the map anyway if the spotlight never draws.
• Under reduced motion there is no tour, and the camera jumps instead of flying.
• The topology loaders share a promise cache, reject non-OK responses and evict failed requests so a later call can retry. GeoJSON conversion moved into src/lib/map-spotlight.ts.

Basemap paint transitions (86d2241)

• scripts/process-map-styles.ts sets transition: { duration: 0, delay: 0 } on the neutralized styles, and both generated styles in public/data/styles/ are updated to match. MapLibre's default 300ms paint transition was still running when the canvas faded back in after a theme switch, which showed as a gray haze over the new theme.

Verification

• pnpm check (core build, workspace typecheck, ESLint, Prettier) passes; 29 unit tests pass.
• next build passes, 379 static pages generated.
• Each commit typechecks and lints on its own.
• Checked by hand at 1440x900 in light and dark, and at 390x844:
  • the tour pauses on hover and resumes about 2s after the pointer leaves; keyboard focus pauses it and keeps it paused while focus moves to the zoom buttons; focusing the map with a click does not leave it paused;
  • reduced motion turns the tour off and makes camera moves instant;
  • theme toggles, rapid repeats included, probed frame by frame: once the map has loaded, no visible frame shows the previous basemap or a map without its spotlight;
  • Kinmen is framed without Wuqiu; 大安區 and 鹽埕區 (one of the smallest districts) stay readable at the district zoom cap.
• apps/web has no browser tests, so none of the map behavior above is covered in CI.

Not done

• Label placement. The focus label anchors at the north-west corner of the region's bounds. For regions that run diagonally, such as 高雄市, that corner sits far from the land. Anchoring to a point inside the polygon would fix it.
• Theme toggle during the first style load. Toggling the theme before the basemap has loaded for the first time can, rarely, flash the map before its spotlight is drawn.
• Background glow banding. Faint banding in the page's background glow comes from the existing body::after radial gradient, which this PR does not change.

[vercel]

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

Project	Deployment	Actions	Updated
zipkit	Ready	Preview	Oct 25, 2026 12:27pm UTC