feat(site): constellations on hover, every star labelled, softer fades

.oxfmtrc.json

@@ -10,6 +10,7 @@
     "**/*.md",
     "**/*.yaml",
     "pnpm-lock.yaml",
-    "apps/site/public/star-names.json"
+    "apps/site/public/star-names.json",
+    "apps/site/public/constellations.json"
   ]
 }

apps/site/public/constellations.json

@@ -0,0 +1 @@
+{"Andromeda":[189,104,104,48,48,1,86,66,66,46,46,48,48,44,44,2844,2844,2785,2844,2850,2850,2843,104,84,84,71,71,102,102,140,2850,2860],"Antlia":[1200,1304,1304,1366],"Apus":[1756,1954,1954,2020,2020,1988],"Aquarius":[2545,2559,2559,2622,2622,2672,2672,2712,2712,2726,2726,2740,2740,2771,2771,2815,2815,2802,2622,2675,2672,2705,2726,2718,2827,2815,2815,2852],"Aquila":[2415,2423,2423,2437,2437,2473,2473,2428,2428,2377,2377,2335,2335,2423,2423,2377,2377,2336],"Ara":[2102,2111,2111,2037,2037,2054,2054,2058,2058,2114,2114,2101],"Aries":[261,194,194,166,166,163],"Auriga":[695,574,574,547,547,529,529,606,606,699,699,695,695,691,691,574,574,535,535,538],"Boötes":[1665,1681,1681,1715,1715,1744,1744,1746,1746,1801,1801,1826,1826,1770,1770,1715,1715,1759,1746,1718,1718,1708,1708,1736,1736,1718],"Caelum":[476,503,503,504,504,550],"Camelopardalis":[525,534,534,514,514,364,364,367,367,332,514,731,731,819],"Cancer":[1129,1096,1096,1089,1089,1099,1096,1040],"Canes Venatici":[1589,1543],"Canis Major":[757,806,806,852,852,862,862,847,847,843,843,753,915,862,806,838,838,853,853,832,832,838],"Canis Minor":[947,918],"Capricornus":[2485,2495,2495,2501,2501,2538,2538,2555,2555,2613,2613,2651,2651,2632,2632,2604,2604,2578,2578,2485],"Carina":[791,761,761,1173,1173,1283,1283,1341,1341,1317,1317,1286,1286,1179,1179,1051,1051,1002,1002,1027,1027,1104,1104,1179,1341,1382,1382,1387,1387,1390,1390,1386,1386,1363,1363,1317],"Cassiopeia":[159,123,123,81,81,50,50,2],"Centaurus":[1405,1488,1488,1529,1529,1557,1557,1652,1652,1679,1679,1670,1670,1667,1667,1694,1694,1747,1747,1794,1667,1627,1751,1652,1652,1691,1529,1493,1493,1423],"Cepheus":[2507,2550,2550,2603,2603,2648,2648,2702,2702,2689,2689,2731,2731,2768,2768,2848,2848,2623,2623,2603,2623,2768],"Cetus":[250,235,235,225,225,255,255,286,286,290,290,250,250,240,240,210,210,158,158,151,151,56,56,17,17,101,101,122,122,158],"Chamaeleon":[1054,1332,1332,1354,1354,1503,1503,1473,1473,1332],"Circinus":[1820,1753,1753,1834],"Columba":[758,683,683,656,656,626,683,705],"Coma Berenices":[1605,1611,1611,1526],"Corona Australis":[2309,2331,2331,2340,2340,2341,2341,2337,2337,2318],"Corona Borealis":[1862,1854,1854,1869,1869,1889,1889,1900,1900,1925,1925,1937],"Corvus":[1489,1491,1491,1498,1498,1533,1533,1544,1544,1491],"Crater":[1433,1412,1412,1403,1403,1369,1369,1388,1388,1407,1407,1413,1413,1448,1448,1471,1403,1413],"Crux":[1571,1496,1522,1535],"Cygnus":[2590,2544,2544,2498,2498,2416,2416,2385,2385,2361,2533,2498,2498,2445,2445,2383],"Delphinus":[2509,2519,2519,2530,2530,2542,2542,2534,2534,2519],"Dorado":[440,486,486,645,645,674,674,700,700,645,645,561,561,486],"Draco":[2157,2164,2164,2119,2119,2125,2125,2157,2157,2355,2355,2235,2235,2076,2076,2004,2004,1945,1945,1852,1852,1696,1696,1545,1545,1421,2235,2237,2355,2431],"Equuleus":[2595,2591,2591,2587],"Eridanus":[558,509,509,484,484,420,420,397,397,369,369,357,357,344,344,275,275,253,253,256,256,294,294,321,321,346,346,372,372,485,485,463,463,446,446,382,382,350,350,323,323,287,287,245,245,226,226,208,208,171,171,142],"Fornax":[307,263,263,192],"Gemini":[734,754,754,798,798,864,864,935,935,960,960,939,939,892,892,850,850,784,784,803,892,887],"Grus":[2782,2763,2763,2751,2751,2728,2728,2677,2677,2751,2724,2700,2700,2670,2670,2659],"Hercules":[1985,2013,2013,2031,2031,2033,2033,2024,2024,1982,1982,1956,1956,1914,2031,2065,2033,2086,2159,2105,2105,2086,2086,2065,2065,2081,2081,2143,2143,2163,2163,2189,2079,2013],"Horologium":[434,252,252,239,239,249,249,298,298,289],"Hydra":[1102,1107,1107,1091,1091,1074,1074,1071,1071,1102,1102,1121,1121,1164,1164,1231,1231,1192,1192,1251,1251,1274,1274,1301,1301,1355,1355,1426,1426,1468,1468,1624,1624,1693,1693,1775],"Hydrus":[24,388,388,251,251,219,219,174,174,182],"Indus":[2513,2532,2532,2557,2557,2662,2662,2598,2598,2513],"Lacerta":[2717,2737,2737,2732,2732,2715,2715,2735,2735,2749,2749,2732,2732,2720,2720,2717,2735,2699,2699,2704],"Leo":[1271,1267,1267,1288,1288,1393,1393,1462,1462,1394,1394,1271,1288,1280,1280,1252,1252,1242],"Leo Minor":[1266,1300,1300,1358,1358,1302,1302,1266,1266,1214],"Lepus":[718,693,693,666,666,627,627,571,571,551,551,614,614,661,661,681,572,571,571,591],"Libra":[1802,1778,1778,1828,1828,1866,1866,1870,1870,1875,1778,1866],"Lupus":[1896,1877,1877,1835,1835,1832,1832,1793,1793,1755,1755,1813,1813,1827,1827,1836,1836,1860,1860,1926,1926,1946,1832,1860],"Lynx":[741,828,828,908,908,1044,1044,1133,1133,1174,1174,1181],"Lyra":[2275,2273,2273,2260,2260,2275,2275,2302,2302,2315,2315,2286,2286,2275],"Mensa":[748,655,655,544,544,563],"Microscopium":[2552,2541,2541,2601,2601,2596,2596,2572,2572,2552],"Monoceros":[955,1023,1023,870,870,766,766,739,870,811,811,759,759,773,773,792],"Musca":[1453,1502,1502,1550,1550,1566,1566,1592,1592,1539,1539,1550],"Norma":[1941,1995,1995,1973,1973,1932,1932,1941],"Octans":[1714,2748,2748,2625,2625,1714],"Ophiuchus":[2160,2145,2145,2140,2140,2126,2126,2059,2059,2014,2014,1968,1968,1974,1974,2025,2025,2072,2059,2025,2025,2012,2012,1998,1998,1990,1990,1994,2140,2072,2072,2095,2095,2108],"Orion":[719,685,685,711,711,728,728,706,706,688,688,605,605,527,533,524,524,520,520,515,515,516,516,527,527,530,530,546,546,562,576,603,603,622,622,605,605,633,633,688,688,652,652,669,652,640,640,622],"Pavo":[2496,2531,2531,2463,2463,2282,2282,2208,2208,2180,2180,2135,2135,2254,2254,2433,2433,2531,2531,2608],"Pegasus":[2687,2756,2756,2790,2790,1,1,11,11,2793,2793,2760,2760,2750,2750,2685,2685,2643,2793,2790,2790,2765,2765,2761,2761,2680,2680,2647],"Perseus":[354,384,384,395,395,394,394,356,356,351,351,345,345,328,328,291,291,258,258,270,270,301,301,302,302,300,300,303,303,295,295,277,410,422,422,415,415,351,301,246,246,148],"Phoenix":[25,97,97,130,130,135,135,105,105,97,97,4,4,25],"Pictor":[825,684,684,675],"Pisces":[110,109,109,118,118,110,110,108,108,134,134,152,152,185,185,165,165,146,146,133,133,111,111,92,92,69,69,2879,2879,2847,2847,2833,2833,2823,2823,2814,2814,2832,2832,2853,2853,2861,2861,2847,2814,2788],"Piscis Austrinus":[2747,2778,2778,2776,2776,2769,2769,2734,2734,2681,2681,2641,2641,2653,2653,2681,2681,2747],"Puppis":[791,891,891,941,941,951,951,980,980,997,997,1021,1021,1015,1015,1027,980,975,975,962,962,941],"Pyxis":[1015,1082,1082,1098,1098,1115],"Reticulum":[439,449,449,402,402,374,374,439],"Sagitta":[2403,2419,2419,2453,2405,2419],"Sagittarius":[2205,2221,2221,2211,2211,2232,2232,2198,2365,2369,2369,2321,2321,2267,2267,2232,2430,2448,2448,2436,2436,2391,2391,2372,2372,2349,2349,2293,2293,2267,2267,2211,2211,2181,2181,2221,2221,2321,2321,2334,2334,2293,2293,2327,2327,2344,2344,2352,2352,2366,2366,2367,2327,2308,2308,2289,2289,2293],"Scorpius":[1924,1927,1927,1943,1927,1979,1979,2005,2005,2022,2022,2040,2040,2043,2043,2050,2050,2073,2073,2123,2123,2141,2141,2133,2133,2118],"Sculptor":[88,2866,2866,2818,2818,2837],"Scutum":[2252,2278,2278,2262,2262,2238,2238,2252],"Serpens":[1892,1886,1886,1894,1894,1919,1919,1892,1892,1868,1868,1890,1890,1902,1902,1968,2072,2127,2127,2160,2160,2176,2176,2216,2216,2303],"Sextans":[1270,1253,1253,1308,1308,1309],"Taurus":[642,482,482,470,470,445,445,454,454,468,468,606,445,398,398,333,333,404,333,330,330,348],"Telescopium":[2190,2229,2229,2231],"Triangulum":[161,196,196,206,206,161],"Triangulum Australe":[2032,1905,1905,1821,1821,2032],"Tucana":[2707,2812,2812,35,35,18,18,2880,2880,2719,2719,2707],"Ursa Major":[1497,1377,1377,1374,1374,1469,1469,1497,1497,1584,1584,1633,1633,1668,1469,1451,1451,1401,1401,1399,1451,1385,1385,1292,1385,1281,1377,1198,1198,1056,1056,1245,1245,1374,1374,1247,1247,1205,1205,1127,1137,1205],"Ursa Minor":[1909,1996,1996,1847,1847,1790,1790,1909,1909,2064,2064,2192,2192,129],"Vela":[1104,1190,1190,1261,1261,1348,1348,1277,1277,1210,1210,1153,1153,1027],"Virgo":[1450,1465,1465,1507,1507,1559,1559,1604,1604,1635,1635,1713,1713,1764,1596,1587,1587,1559,1604,1648,1648,1689,1689,1772],"Volans":[1145,1061,1061,1032,1032,903,903,876,876,1032,1032,1145],"Vulpecula":[2353,2381,2381,2434,2434,2459,2459,2484]}

apps/site/src/components/Aurora.astro

@@ -10,6 +10,9 @@ import {
 <div class="aurora" aria-hidden="true">
   <canvas></canvas>
 </div>
+<!-- The hovered star's constellation, traced out from it over the sky and
+     under the page's cards. -->
+<svg class="sky-lines" aria-hidden="true"></svg>
 
 <!-- A faint info glyph, shown once the sky is running. It opens the details
      and credits for whichever site this visit drew. -->
@@ -92,6 +95,7 @@ import {
   import type {
     AuroraMessage,
     SkyLabel,
+    SkyLine,
     WorkerMessage,
   } from "../scripts/aurora.worker";
 
@@ -204,19 +208,128 @@ import {
     target === document.documentElement ||
     target === document.body ||
     (target instanceof HTMLElement && target.tagName === "MAIN");
-  const label = (found: SkyLabel | null) => {
+
+  // The tooltip rises into place out of a soft blur, and fades away. Timing
+  // comes from the theme's enter tokens; reduced motion keeps only the fade.
+  const root = getComputedStyle(document.documentElement);
+  const enter = {
+    duration: parseFloat(root.getPropertyValue("--gmt-enter-duration")) * 1000 || 500,
+    easing: root.getPropertyValue("--gmt-enter-easing").trim() || "ease-out",
+  };
+  const calm = matchMedia("(prefers-reduced-motion: reduce)");
+  let naming = "";
+  let fade: Animation | null = null;
+  const name = (found: SkyLabel | null) => {
     if (!tip) return;
-    tip.hidden = !found || !over || !canvas?.classList.contains("on");
-    if (!found || tip.hidden) return;
-    const note = document.createElement("span");
-    note.textContent = found.note;
-    tip.replaceChildren(found.name, ...(found.note ? [note] : []));
+    if (!found) {
+      if (!naming) return;
+      naming = "";
+      const from = getComputedStyle(tip).opacity;
+      fade?.cancel();
+      fade = tip.animate([{ opacity: from }, { opacity: 0 }], {
+        duration: 200,
+        easing: "ease-in",
+        fill: "forwards",
+      });
+      fade.onfinish = () => {
+        if (!naming) tip.hidden = true;
+      };
+      return;
+    }
+    const fresh = found.name !== naming;
+    if (fresh) {
+      naming = found.name;
+      tip.hidden = false;
+      const note = document.createElement("span");
+      note.textContent = found.note;
+      tip.replaceChildren(found.name, ...(found.note ? [note] : []));
+    }
     // Centred on the object, but kept inside the window at the sides.
     const half = tip.offsetWidth / 2 + 4;
     const width = document.documentElement.clientWidth;
     tip.style.left = `${Math.min(Math.max(found.x, half), width - half)}px`;
     tip.style.top = `${found.y}px`;
     tip.classList.toggle("below", found.y < 48);
+    if (!fresh) return;
+    const rise = tip.classList.contains("below") ? -6 : 6;
+    fade?.cancel();
+    fade = tip.animate(
+      calm.matches
+        ? [{ opacity: 0 }, { opacity: 1 }]
+        : [
+            {
+              opacity: 0,
+              transform: `translateY(${rise}px) scale(0.94)`,
+              filter: "blur(4px)",
+            },
+            { opacity: 1, transform: "none", filter: "blur(0)" },
+          ],
+      enter,
+    );
+  };
+
+  // Constellation lines: each run draws itself out from the hovered star, a
+  // step at a time, and the whole figure fades away a moment after the
+  // pointer leaves. Moving to another star of the same constellation keeps it,
+  // and as the worker follows the star (resize, the sky turning) the lines
+  // move with it without drawing again.
+  const sketch = document.querySelector<SVGSVGElement>(".sky-lines");
+  let figure = "";
+  let wipe = 0;
+  const polyline = ({ step, points }: SkyLine, drawn: boolean) => {
+    const line = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "polyline",
+    );
+    line.setAttribute("points", points.join(" "));
+    line.setAttribute("pathLength", "1");
+    line.style.setProperty("--step", String(step));
+    line.classList.toggle("drawn", drawn);
+    return line;
+  };
+  const trace = (found: SkyLabel | null) => {
+    if (!sketch) return;
+    const next = (found?.lines && found.figure) || "";
+    if (next === figure) {
+      if (!next) return;
+      clearTimeout(wipe);
+      sketch.classList.remove("out");
+      const lines = found?.lines ?? [];
+      const old = [...sketch.children];
+      lines.forEach((line, k) => {
+        const el = old[k];
+        if (el) el.setAttribute("points", line.points.join(" "));
+        else sketch.append(polyline(line, true));
+      });
+      old.slice(lines.length).forEach((el) => el.remove());
+      return;
+    }
+    if (!next) {
+      sketch.classList.add("out");
+      clearTimeout(wipe);
+      wipe = window.setTimeout(() => {
+        sketch.replaceChildren();
+        figure = "";
+      }, 1200);
+      return;
+    }
+    clearTimeout(wipe);
+    figure = next;
+    sketch.classList.remove("out");
+    sketch.replaceChildren(
+      ...(found?.lines ?? []).map((line) => polyline(line, false)),
+    );
+  };
+
+  // Once nothing is shown, the worker can stop following the last pick.
+  let holding = false;
+  const label = (found: SkyLabel | null) => {
+    const shown =
+      found && over && canvas?.classList.contains("on") ? found : null;
+    if (holding && !shown) post?.({ type: "drop" });
+    holding = !!shown;
+    name(shown);
+    trace(shown);
   };
   const point = (event: PointerEvent) => {
     over = bare(event.target);
@@ -344,6 +457,59 @@ import {
   .sky-tip.below {
     translate: -50% 12px;
   }
+
+  /* Under the cards, over the sky. Each polyline has pathLength 1, so a dash
+     of 1 offset by 1 is the line not yet drawn. */
+  .sky-lines {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    filter: drop-shadow(
+      0 0 3px color(from var(--gmt-cyan) srgb r g b / 0.6)
+    );
+    transition: opacity var(--gmt-duration-med) var(--gmt-easing);
+  }
+  .sky-lines.out {
+    opacity: 0;
+    transition: opacity 0.7s var(--gmt-easing) 0.3s;
+  }
+  .sky-lines :global(polyline) {
+    fill: none;
+    stroke: color(from var(--gmt-ice) srgb r g b / 0.45);
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-dasharray: 1;
+    stroke-dashoffset: 1;
+    animation: sky-trace 0.6s var(--gmt-enter-easing) forwards;
+    animation-delay: calc(var(--step) * 0.16s);
+  }
+  /* Lines added while the figure is up, as a cut closes: already drawn. */
+  .sky-lines :global(polyline.drawn) {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+  @keyframes sky-trace {
+    from {
+      stroke-dashoffset: 1;
+      opacity: 0;
+    }
+    40% {
+      opacity: 1;
+    }
+    to {
+      stroke-dashoffset: 0;
+      opacity: 1;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .sky-lines :global(polyline) {
+      animation-delay: 0s;
+    }
+  }
   .sky-tip[hidden] {
     display: none;
   }

apps/site/src/components/Header.astro

@@ -46,6 +46,12 @@ const links = [
     border-radius: 0;
     border-width: 0 0 1px 0;
   }
+  /* Only the bottom border: drop the glass panel's four-sided hairline and
+     its top highlight. */
+  .site-header::before,
+  .site-header::after {
+    display: none;
+  }
   .wordmark {
     font-family: var(--gmt-font-display);
     color: var(--gmt-ice);

apps/site/src/components/RepoCard.astro

@@ -18,17 +18,25 @@ const { name, description, docsHref, githubHref } = Astro.props;
 </article>
 
 <style>
-  /* A full border on all four sides; it brightens as a whole. */
+  /* A full border on all four sides; on hover it brightens as a whole and a
+     soft glow fades in around the card, on the theme's enter timing. Going
+     back is quicker, so moving between cards never leaves a trail. */
   .repo-card {
     border: 1px solid var(--gmt-border);
     display: flex;
     flex-direction: column;
     gap: 0.75rem;
-    transition: border-color var(--gmt-duration-fast) var(--gmt-easing);
+    box-shadow: 0 0 0 0 transparent;
+    transition:
+      border-color var(--gmt-duration-med) var(--gmt-easing),
+      box-shadow var(--gmt-duration-med) var(--gmt-easing);
   }
   .repo-card:hover,
   .repo-card:focus-within {
     border-color: var(--gmt-border-strong);
+    box-shadow: 0 0 28px -4px var(--gmt-glow);
+    transition-duration: var(--gmt-enter-duration);
+    transition-timing-function: var(--gmt-enter-easing);
   }
   h2 {
     margin: 0;
@@ -44,10 +52,42 @@ const { name, description, docsHref, githubHref } = Astro.props;
     gap: 0.75rem;
     flex-wrap: wrap;
   }
+  /* The same fade on the buttons. The glow is a layer of its own that fades
+     by opacity, so it never fights the focus ring's box-shadow. */
   .gmt-button {
+    position: relative;
     display: inline-block;
     padding: 0.4rem 1rem;
     text-decoration: none;
     color: var(--gmt-ice);
+    transition:
+      color var(--gmt-duration-med) var(--gmt-easing),
+      background var(--gmt-duration-med) var(--gmt-easing),
+      border-color var(--gmt-duration-med) var(--gmt-easing);
+  }
+  .gmt-button::after {
+    content: "";
+    position: absolute;
+    inset: -1px;
+    border-radius: inherit;
+    corner-shape: inherit;
+    box-shadow:
+      0 0 14px -2px var(--gmt-glow),
+      inset 0 0 10px var(--gmt-glow);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--gmt-duration-med) var(--gmt-easing);
+  }
+  .gmt-button:hover,
+  .gmt-button:focus-visible {
+    border-color: var(--gmt-border-strong);
+    transition-duration: var(--gmt-enter-duration);
+    transition-timing-function: var(--gmt-enter-easing);
+  }
+  .gmt-button:hover::after,
+  .gmt-button:focus-visible::after {
+    opacity: 1;
+    transition-duration: var(--gmt-enter-duration);
+    transition-timing-function: var(--gmt-enter-easing);
   }
 </style>

apps/site/src/scripts/aurora.sites.ts

@@ -125,6 +125,7 @@ export const SKY_CREDITS: [string, string][] = [
     "JPL Keplerian elements for approximate positions (E. M. Standish).",
   ],
   ["Star names", "IAU Catalog of Star Names (IAU WGSN)."],
+  ["Figures", "Constellation lines from d3-celestial (Olaf Frohn)."],
 ];
 
 const POINTS = [