How Ursa was made

The idea: the page is the walk

A refuge four hours from the road sells two things: the walk up and the night at the top. So the page follows that order. It opens on a hiking map at the car park, climbs through the forest with an altimeter that follows your reading, stops at the refuge’s floor plan, and ends in the dark above the ridge, where the booking form is.

The visual language comes from the mountains themselves: Romanian tourist maps, and the painted trail markers you follow on the ground.

The map is generated, not drawn

The hero is a mountain generated in your browser from seeded simplex noise, so it’s the same mountain on every visit. A ridge, a glacial valley, a spur and a summit are shaped on top of the noise, and the terrain is calibrated so the refuge sits at exactly 1,842 m.

• Hillshade is lit from the north-west, as on Swiss maps, and forest is tinted below a tree line that wanders with its own noise.
• Contours come from marching squares on a grid of heights, one path per 25 m level (50 m on small screens), with the index contours drawn thicker and labelled.
• The stream is traced downhill from the cirque; the trailhead is where it crosses 640 m.
• The three routes are found with A* search over the terrain, with a penalty for steep ground. That’s why they switchback where a real path would.
• Labels place themselves: each claims a box, and the next one tries another side if it would overlap.

On load, the contours rise from the valley floor to the ridge, then the red route draws itself up to the refuge. Point anywhere on the map to read the height and the ground under your cursor. With reduced motion turned on, the finished map appears at once.

The sky is calculated

The stars are seeded too, with a Milky Way rising from behind the ridge and the Plough drawn from real star positions. “Tonight above Ursa” works out sunset, the end of astronomical twilight and the moon’s phase in the browser for the refuge’s position, including the lower horizon you get at 1,842 m. Only the brighter stars twinkle, only while the section is on screen, and a button stops them.

Palette

Map paper and spruce ink by day, trail-marker paint for everything you act on, and night blue below the dusk.

Type

Two families, both self-hosted variable fonts with Romanian diacritics.

Trail markers as the key

Romanian trails are waymarked with painted symbols on a white square: a stripe, a cross, a triangle or a dot, in red, blue or yellow. The site uses them the way the mountain does, as the key to every route, on the map, in the legend and in the route list.

Built to be light and open to everyone

• Plain HTML, CSS and JavaScript. No framework, no build step, no dependencies.
• No cookies, no analytics and no requests to other servers. The fonts are served from here, and a strict Content Security Policy keeps it that way.
• No photographs. The map, the floor plan, the elevation profiles and the sky are all drawn with SVG and canvas.
• Works with a keyboard alone. The booking calendar is a group of radio buttons, so arrow keys move between nights and full nights are skipped.
• Respects reduced motion and dark mode. In dark mode the map turns into a night map.
• Everything is laid out for phones first; on a phone the altimeter becomes a strip that stays under the header while you read the climb.

Credits

Concept, design and code by Daniel Butnar. Brygada 1918 and Schibsted Grotesk are used under the SIL Open Font License. The refuge, its warden and its bookings are fictional; the Făgăraș Mountains are real, and worth the walk.

Back to the map