Repository navigation
feat(site): the real night sky over Ísafjörður and Helsinki - #1
Merged
Merged
Conversation
`.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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
The landing page gets a realistic aurora over a real night sky, seen from one of two places:
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.
@northguild/gmt.getUnixNowgives the clock andgetSystemTimeZonepicks the starting site, both in the worker so Temporal stays off the main thread.Dateis now banned in lint by@northguild/gmt-oxlint.scripts/regenerate every data file (skylines,stars.bin, the moon map).Commits
fix(theme): the glass hairline (.gmt-glass::before) drew round corners outside the bevel. It now inheritscorner-shape.chore: add the@northguild/gmtdependency and theDateban, plus dev dependencies for the data scripts.build: site definitions, data scripts and generated data.feat(site): the renderer, the shaders and the info popover.feat(site): pick the starting site from the time zone, give the site buttons the sonar ping, frame phones properly.feat(helsinki): domes and spires from OSM 3D building parts, with Helsinki sampled every 0.05°.Checks
oxlint,oxfmt --check,pnpm -r checkandpnpm -r buildpass locally.@northguild/gmtbundles. It loads after the page is idle and runs off the main thread.Known limits