@a2f0/skyline 0.0.0-stage → 0.1.2

package/site/stars.svg

@@ -0,0 +1,176 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="100%" height="100%"
+     role="img" aria-labelledby="stars-title stars-description"
+     style="background:#000000;pointer-events:none">
+  <title id="stars-title">Twinkling night sky</title>
+  <desc id="stars-description">96 randomly positioned grayscale stars spread across the full viewport. Ten randomly selected stars slowly twinkle with independent timing and changing brightness patterns while the rest stay steady. Reduced motion pauses twinkling; the debug-motion fragment enables stronger brightness pulses on the same ten stars.</desc>
+  <style><![CDATA[
+    #atmosphere circle {
+      opacity: 0.5;
+    }
+    #atmosphere .twinkle {
+      animation: star-twinkle var(--twinkle-duration, 53.333s) ease-in-out var(--twinkle-delay, 0s) infinite;
+    }
+
+    @keyframes star-twinkle {
+      0%, 10%, 84%, 100% { opacity: 0.5; }
+      28% { opacity: var(--twinkle-dim, 0.45); }
+      50% { opacity: var(--twinkle-peak, 0.58); }
+      68% { opacity: var(--twinkle-afterglow, 0.5); }
+    }
+    @keyframes star-debug {
+      0%, 100% { opacity: 0.3; }
+      50% { opacity: 0.7; }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      #atmosphere .twinkle { animation: none; }
+    }
+
+    /* An explicit debug preview may override the system motion preference. */
+    #debug-motion:target .twinkle {
+      animation: star-debug var(--twinkle-duration, 53.333s) ease-in-out var(--twinkle-delay, 0s) infinite;
+    }
+  ]]></style>
+  <g id="atmosphere">
+    <g id="debug-motion">
+      <g fill="#ebebeb" class="stars-a">
+        <circle cx="22.65%" cy="16.86%" r="0.85" />
+        <circle cx="39.00%" cy="30.49%" r="0.53" />
+        <circle cx="57.23%" cy="6.03%" r="0.66" />
+        <circle cx="19.00%" cy="30.49%" r="0.53" />
+        <circle cx="48.77%" cy="30.49%" r="0.61" />
+        <circle cx="78.53%" cy="32.97%" r="0.53" />
+        <circle cx="28.37%" cy="95.40%" r="0.56" />
+        <circle cx="6.58%" cy="73.16%" r="0.59" />
+        <circle cx="32.24%" cy="90.51%" r="0.69" />
+        <circle cx="67.76%" cy="78.55%" r="0.63" />
+        <circle cx="57.98%" cy="81.71%" r="0.76" />
+        <circle cx="74.73%" cy="37.24%" r="0.69" />
+        <circle cx="15.23%" cy="79.23%" r="0.78" />
+        <circle cx="12.25%" cy="31.05%" r="0.86" />
+        <circle cx="62.12%" cy="28.94%" r="0.78" />
+        <circle cx="52.11%" cy="96.70%" r="0.76" />
+        <circle cx="10.55%" cy="15.87%" r="0.58" />
+        <circle cx="49.93%" cy="72.17%" r="0.88" />
+        <circle cx="58.03%" cy="57.12%" r="0.58" />
+        <circle cx="21.98%" cy="81.28%" r="0.63" />
+        <circle cx="1.58%" cy="77.93%" r="0.64" />
+        <circle cx="14.81%" cy="69.51%" r="0.83" />
+        <circle cx="40.24%" cy="92.43%" r="0.64" />
+        <circle cx="13.82%" cy="44.86%" r="0.53" />
+        <circle cx="7.52%" cy="43.87%" r="0.54" />
+        <circle cx="79.93%" cy="26.09%" r="0.54" />
+        <circle cx="20.44%" cy="9.68%" r="0.68" />
+        <circle cx="16.00%" cy="58.18%" r="0.85" />
+        <circle cx="74.51%" cy="2.25%" r="0.93" />
+        <circle cx="13.22%" cy="96.82%" r="0.64" />
+        <circle cx="46.80%" cy="53.16%" r="0.56" />
+        <circle cx="62.41%" cy="97.32%" r="0.90" />
+      </g>
+      <g fill="#cfcfcf" class="stars-b">
+        <circle cx="27.00%" cy="37.30%" r="0.58" />
+        <circle cx="45.24%" cy="9.74%" r="0.81" />
+        <circle cx="65.70%" cy="21.51%" r="0.58" />
+        <circle cx="30.06%" cy="21.82%" r="0.66" />
+        <circle cx="54.53%" cy="39.78%" r="0.49" />
+        <circle cx="85.58%" cy="24.30%" r="0.61" />
+        <circle cx="18.23%" cy="76.88%" r="0.69" />
+        <circle cx="82.33%" cy="29.93%" r="0.69" />
+        <circle cx="55.02%" cy="21.70%" r="0.59" />
+        <circle cx="9.84%" cy="94.53%" r="0.69" />
+        <circle cx="71.17%" cy="75.21%" r="0.59" />
+        <circle cx="71.79%" cy="22.62%" r="0.66" />
+        <circle cx="90.56%" cy="50.12%" r="0.63" />
+        <circle cx="62.27%" cy="52.85%" r="0.63" />
+        <circle cx="77.73%" cy="83.51%" r="0.69" />
+        <circle cx="78.44%" cy="47.89%" r="0.59" />
+        <circle cx="82.83%" cy="77.62%" r="0.54" />
+        <circle cx="3.69%" cy="88.28%" r="0.81" />
+        <circle cx="2.10%" cy="93.54%" r="0.88" />
+        <circle cx="39.80%" cy="21.39%" r="0.66" />
+        <circle cx="5.23%" cy="16.18%" r="0.90" />
+        <circle cx="26.22%" cy="85.67%" r="0.71" />
+        <circle cx="73.44%" cy="57.56%" r="0.88" />
+        <circle cx="45.82%" cy="76.63%" r="0.61" />
+        <circle cx="47.34%" cy="37.30%" r="0.80" />
+        <circle cx="84.55%" cy="46.90%" r="0.69" />
+        <circle cx="38.13%" cy="70.01%" r="0.69" />
+        <circle cx="47.02%" cy="23.06%" r="0.68" />
+        <circle cx="38.07%" cy="39.59%" r="0.59" />
+        <circle cx="93.36%" cy="65.73%" r="0.90" />
+        <circle cx="9.14%" cy="80.53%" r="0.54" />
+        <circle cx="3.27%" cy="60.10%" r="0.78" />
+      </g>
+      <g fill="#ffffff" class="stars-c">
+        <circle cx="32.77%" cy="12.22%" r="0.71" />
+        <circle cx="52.06%" cy="22.44%" r="0.58" />
+        <circle cx="81.00%" cy="13.77%" r="0.71" />
+        <circle cx="36.06%" cy="43.50%" r="0.53" />
+        <circle cx="63.82%" cy="10.05%" r="0.71" />
+        <circle cx="22.93%" cy="5.16%" r="0.83" />
+        <circle cx="7.22%" cy="13.83%" r="0.59" />
+        <circle cx="55.08%" cy="2.81%" r="0.83" />
+        <circle cx="19.35%" cy="50.19%" r="0.54" />
+        <circle cx="25.53%" cy="50.00%" r="0.54" />
+        <circle cx="14.88%" cy="7.76%" r="0.80" />
+        <circle cx="41.85%" cy="86.98%" r="0.63" />
+        <circle cx="43.80%" cy="88.83%" r="0.64" />
+        <circle cx="42.13%" cy="73.91%" r="0.88" />
+        <circle cx="49.00%" cy="96.45%" r="0.75" />
+        <circle cx="28.13%" cy="66.60%" r="0.71" />
+        <circle cx="75.02%" cy="77.56%" r="0.93" />
+        <circle cx="52.89%" cy="83.26%" r="0.66" />
+        <circle cx="52.24%" cy="65.48%" r="0.83" />
+        <circle cx="32.60%" cy="70.38%" r="0.91" />
+        <circle cx="16.65%" cy="12.84%" r="0.81" />
+        <circle cx="33.30%" cy="35.57%" r="0.73" />
+        <circle cx="88.49%" cy="17.30%" r="0.61" />
+        <circle cx="15.16%" cy="91.74%" r="0.78" />
+        <circle cx="92.57%" cy="32.78%" r="0.85" />
+        <circle cx="91.48%" cy="94.47%" r="0.53" />
+        <circle cx="55.15%" cy="60.65%" r="0.61" />
+        <circle cx="94.24%" cy="29.07%" r="0.88" />
+        <circle cx="12.75%" cy="75.46%" r="0.81" />
+        <circle cx="16.91%" cy="25.54%" r="0.54" />
+        <circle cx="52.66%" cy="52.17%" r="0.56" />
+        <circle cx="68.74%" cy="10.67%" r="0.88" />
+      </g>
+    </g>
+  </g>
+  <script><![CDATA[
+    const stars = [...document.querySelectorAll("#atmosphere circle")];
+
+    function randomizeTwinkle(star) {
+      star.style.setProperty("--twinkle-dim", 0.42 + Math.random() * 0.05);
+      star.style.setProperty("--twinkle-peak", 0.54 + Math.random() * 0.06);
+      star.style.setProperty("--twinkle-afterglow", 0.47 + Math.random() * 0.06);
+    }
+
+    for (const star of stars) {
+      star.setAttribute("cx", `${1 + Math.random() * 98}%`);
+      star.setAttribute("cy", `${2 + Math.random() * 96}%`);
+    }
+
+    // Choose about 10% without replacement, once per load.
+    const twinkleCount = Math.round(stars.length * 0.1);
+    for (let i = 0; i < twinkleCount; i++) {
+      const selected = i + Math.floor(Math.random() * (stars.length - i));
+      [stars[i], stars[selected]] = [stars[selected], stars[i]];
+      const star = stars[i];
+      const duration = (60 + Math.random() * 40) / 1.5;
+      star.style.setProperty("--twinkle-duration", `${duration}s`);
+      star.style.setProperty("--twinkle-delay", `${-Math.random() * duration}s`);
+      randomizeTwinkle(star);
+      star.classList.add("twinkle");
+    }
+
+    document.querySelector("#atmosphere").addEventListener("animationiteration", (event) => {
+      if (event.animationName === "star-twinkle") {
+        // The cycle ends at a fixed brightness so the next pattern joins smoothly.
+        randomizeTwinkle(event.target);
+      }
+    });
+  ]]></script>
+</svg>

package/site/study-loader.js

@@ -0,0 +1,20 @@
+"use strict";
+(() => {
+    const entry = document.currentScript.dataset["study"];
+    function showStudyError(message) {
+        document.querySelector("#loading").textContent = message;
+        document.querySelectorAll("button").forEach((button) => { button.disabled = true; });
+        if (window.parent !== window)
+            window.parent.postMessage({ type: "skyline:unavailable" }, location.origin);
+    }
+    if (location.protocol === "file:") {
+        const page = location.pathname.split("/").pop();
+        showStudyError(`Start a local server with python3 -m http.server, then open http://localhost:8000/${page} to explore the 3D study.`);
+    }
+    else {
+        import(entry).catch((error) => {
+            console.error(error);
+            showStudyError("The 3D preview could not load. Check that WebGL 2 is enabled, then reload. You can still compare the SVG or return to the skyline.");
+        });
+    }
+})();

package/site/study-types.js

@@ -0,0 +1 @@
+export {};