WhatTheStar · /design
compositions minimap

    Minimap

    The sky compass: the circular instrument in the bottom-right of /explore, 96px on a phone and 120px on a desktop.

    What it is for

    Where is the view inside the whole sky? That is the entire brief. The map can already be dragged anywhere, names what it is pointing at, and prints Alt/Az/RA/Dec in the readout card, so a second star chart in the corner is decoration. What the map cannot show is everything that is not on screen: the far side of the hemisphere behind you, which way north is once north has scrolled off, how high the view sits between the horizon and straight up, and where the object you selected has got to.

    Every mark is there to answer some part of that, and the ones that were not have been taken out.

    The instrument

    wide, due south

    phone frame, target NE

    zoomed in

    aimed below the horizon

    near the zenith

    • Zenith at the centre, horizon at the rim. A zenithal equidistant projection, so radius is altitude. The two faint rings are 30° and 60°; the firm one is the horizon, which is the edge of what exists.
    • North up, east right. The compass every reader already owns — not the planisphere convention, which puts east on the left and only makes sense with the chart held above your head. North also carries a solid index at the rim.
    • The wedge is the screen. It covers the bearings and heights the camera actually takes in, widening as the view tips up and closing to a full cap at the zenith, where a screen really does face every direction at once. The dot inside it is the exact aim; below the horizon it goes hollow and pins to the rim.
    • The line of text does the heavy lifting. SSW 34°, always on, in the bottom bezel. Reading a bearing and a height off a 70px drawing takes a moment; reading two words takes none.
    • One amber ring for the selection. The one thing on the sky the user has said they care about, and the only one worth telling them is behind them.

    What was taken out

    The star field. Every frame it swept all 8,920 catalogue entries and ran a full equatorial-to-horizontal conversion on the 288 brighter than magnitude 3.5, to scatter the ~140 of them above the horizon over a disc 70px across. At that size a star field cannot be read as a star field — it was a texture, and it competed with the one mark that matters.

    Also gone: the old field-of-view "pie slice", whose radius was capped at 0.3 of the dial and therefore stood for no real quantity; and the cardinal S, because south is the bottom of every compass ever drawn and the readout standing in its place names the bearing in words.

    Navigating

    Drag on this one. Hover shows a faint ghost where a press would send the view — the dial has to teach that a spot on it is a direction, and that costs less than a legend. On the map a tap is tweened over 420ms so the sky does not change under you between blinks, while a drag steers with no tween at all, because a control you can only tap is a control you have to aim.

    Keyboard: the canvas is wrapped in a real button, so arrows pan in 15° and 10° steps, Home faces north and Enter looks straight up. Each move is spoken through a live region, which reports the direction that was asked for rather than the one the tween has reached yet.

    Colour, at night

    A canvas cannot read a CSS variable, so the component keeps one hidden probe per ink role, reads its computed colour, and repaints on theme:change. It matters here more than anywhere: night mode collapses every tone to the same ember, so the compass would otherwise be the brightest thing left on a dark-adapted screen. It also means hue cannot separate anything — north, the aim and the selection are told apart by shape and by a dark collar, not by colour. Flip the theme above and these dials repaint.

    Size

    Unchanged: still exactly --hud-minimap square, which MapLayout counts as both the right flank a desktop scrubber must clear and the floor the below-horizon notice stacks on. The old illegibility was never a shortage of pixels — it was a fixed 240px backing store squeezed into 96 CSS px, so bold 16px type rendered at 6.4px. Drawing at the real size and at device resolution buys more than a bigger box would, and costs the map nothing.