Skip to content

feat(site): the real night sky over Ísafjörður and Helsinki - #1

Merged
craig-o-curtis merged 6 commits into
mainfrom
feat/aurora-background
Oct 20, 2026
Merged

craig-o-curtis merged 6 commits into
mainfrom
feat/aurora-background

Conversation

@craig-o-curtis

@craig-o-curtis craig-o-curtis commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

What

The landing page gets a realistic aurora over a real night sky, seen from one of two places:

  • Ísafjörður, Iceland: from Sólgata by the church, looking north-northeast past the Eyrarfjall wall to the fjord mouth.
  • Helsinki, Finland: from the Suomenlinna main pier, across the water to the city skyline.

The first site comes from the browser's time zone: Finland opens on Helsinki, Iceland on Ísafjörður, and anywhere else gets a random site. A faint ⓘ in the bottom-right corner opens a popover with the site's details, the data credits and a location switcher.

How it works

Everything renders in a Web Worker on an OffscreenCanvas, so the main thread does no WebGL work. The page's own script is 1.6 KB.

  • Aurora (simulated): a thin emissive curtain about 100 km up, drawn in perspective over a curved Earth (after Lawlor & Genetti: a ground footprint times a height profile). Rays converge toward the magnetic zenith. Folds, bright knots and dark gaps vary along the arc.
  • Stars (real): the Yale Bright Star Catalogue, V ≤ 5.5, precessed to date and placed for the current time and site.
  • Moon (real): its true position, including the parallax correction for the viewer's location, and its phase lit by the real sun, at true size. It is hidden by the mountains when behind them and reflected in the sea at Helsinki.
  • Ground:
    • Ísafjörður: a mountain skyline from Copernicus DEM GLO-30.
    • Helsinki: the city skyline from OpenStreetMap, including its 3D building parts, so the Cathedral and other landmarks keep their domes and spires. The city has lights and a glow, and the sea reflects the sky.
  • Phones: on portrait screens the view widens and tilts so the aurora shows above the cards rather than behind them.
  • Time: taken from @northguild/gmt. getUnixNow gives the clock and getSystemTimeZone picks the starting site, both in the worker so Temporal stays off the main thread. Date is now banned in lint by @northguild/gmt-oxlint.
  • Data provenance: the scripts in scripts/ regenerate every data file (skylines, stars.bin, the moon map).

Commits

  1. fix(theme): the glass hairline (.gmt-glass::before) drew round corners outside the bevel. It now inherits corner-shape.
  2. chore: add the @northguild/gmt dependency and the Date ban, plus dev dependencies for the data scripts.
  3. build: site definitions, data scripts and generated data.
  4. feat(site): the renderer, the shaders and the info popover.
  5. feat(site): pick the starting site from the time zone, give the site buttons the sonar ping, frame phones properly.
  6. feat(helsinki): domes and spires from OSM 3D building parts, with Helsinki sampled every 0.05°.

Checks

  • oxlint, oxfmt --check, pnpm -r check and pnpm -r build pass locally.
  • Time zone defaults, tested with Playwright time zone emulation:
    • Europe/Helsinki opens on Helsinki.
    • Atlantic/Reykjavik opens on Ísafjörður.
    • America/New_York gets a random site.
  • GPU: about 1.7 ms per 1280×720 frame on an M-series Mac, the same as the earlier 2D shader. A 12-step fallback runs in about 1.1 ms.
  • Motion is calm: under 1% of pixels change over 1.5 s.
  • Reduced motion draws one still frame (verified with two frames 3 s apart).
  • The worker bundle is 75 KB gzipped. About 46 KB of that is the Temporal polyfill that @northguild/gmt bundles. It loads after the page is idle and runs off the main thread.

Known limits

  • Roof shapes are only as good as the OSM 3D modelling. The Cathedral is modelled in detail; most other buildings are flat-topped blocks at their mapped height or floor count.
  • The aurora is simulated, not live space-weather data.

`.gmt-glass::before` inherited `border-radius` but not `corner-shape`, so the
gradient hairline drew round corners outside the bevelled border. Over a
bright background the extra arc shows at the top-left and bottom-right.
- `@northguild/gmt` is a site dependency: the aurora takes wall-clock time
  from `getUnixNow()` (Temporal), never `Date`.
- `@northguild/gmt-oxlint` is wired into `.oxlintrc.json`, so any `Date`
  use fails `pnpm lint`.
- `geotiff` and `jpeg-js` are dev dependencies for the sky data scripts.
Each script is the provenance of the file it writes; re-run to refresh.

- `aurora.sites.ts`: the viewpoints. Ísafjörður (Sólgata, by the church)
  and Helsinki (the Suomenlinna main pier, across the water to the city),
  with camera, aurora distances, city glow and credits per site.
- `build-skyline.mjs`: per-site skyline, far shore over water, and ridge
  distance from Copernicus DEM GLO-30, plus OpenStreetMap building heights
  for Helsinki. Writes `skylines/<id>.ts`.
- `build-stars.mjs`: naked-eye stars (V <= 5.5, 2,887) from the Yale Bright
  Star Catalogue, 5th revised edition (CDS V/50), to `public/stars.bin`.
- `build-moon.mjs`: a 128x64 lunar albedo map from NASA SVS's CGI Moon Kit.
A WebGL background on the landing page, rendered in a Web Worker on an
OffscreenCanvas so the main thread does no WebGL work.

- Aurora as a thin emissive curtain about 100 km up, seen in perspective
  (Lawlor & Genetti: a ground footprint times a height profile), marched
  over a curved Earth. Rays converge toward the magnetic zenith; folds,
  bright knots and dark gaps vary along the arc. Simulated, not live data.
- Real stars for this moment, precessed to date; dimmer near the horizon
  and when the moon is up.
- The moon at true size, with its real position (topocentric) and phase
  lit by the real sun; it sets behind the mountains.
- Mountains (Ísafjörður) or the city skyline with lights and the sea in
  front (Helsinki), with the sky and city lights reflected in the water.
- A faint info button opens a popover with the site, its credits and a
  location switcher. Each visit starts at a random site.
- Reduced motion draws one still frame. Slow GPUs step down in quality
  and finally fall back to the CSS gradient.
…phones

- The worker picks the first site from the browser's time zone with
  `getSystemTimeZone()` from `@northguild/gmt`: Finland (Europe/Helsinki,
  Europe/Mariehamn) opens on Helsinki, Iceland (Atlantic/Reykjavik) on
  Ísafjörður, anywhere else at random. It reports the site to the page so
  the popover matches. Running it in the worker keeps Temporal off the
  main thread.
- The site switcher uses real buttons (`gmt-button gmt-sonar-focus`,
  `aria-pressed`), so they ping on click and focus like the other buttons.
- On portrait screens the view widens and tilts so the horizon sits about
  a third of the way down: the aurora shows above the cards instead of
  behind them, with the land or water below.
The skyline script now reads OSM Simple 3D Buildings: building parts with
height, roof height and roof shape (dome, onion, cone, pyramidal). Where a
building is modelled in parts, the parts replace its outline. Helsinki is
sampled every 0.05° so the Cathedral's domes and lantern keep their shape
instead of reading as one block. Overpass queries retry with backoff and
fall back to a mirror.
@craig-o-curtis craig-o-curtis added enhancement New feature or request good first issue Good for newcomers and removed good first issue Good for newcomers labels Oct 20, 2026
@craig-o-curtis
craig-o-curtis merged commit c1b7c0e into main Oct 20, 2026
1 check passed
@craig-o-curtis
craig-o-curtis deleted the feat/aurora-background branch October 23, 2026 16:48
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant