@motionstudies/web 0.1.0-alpha.0

package/shell.css

@@ -0,0 +1,715 @@
+/* Opt-in full-page study shell. Widgets can import tokens and component CSS alone. */
+@import './tokens.css';
+
+:where(.motion-study) * {
+  box-sizing: border-box;
+}
+
+:where(html.motion-study),
+:where(.motion-study) body,
+:where(.motion-study) #root {
+  width: 100%;
+  min-width: 320px;
+  min-height: 100%;
+  margin: 0;
+}
+
+:where(html.motion-study) {
+  overscroll-behavior: none;
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+:where(.motion-study) body {
+  min-height: 100vh;
+  overflow: hidden;
+}
+
+:where(.motion-study) button,
+:where(.motion-study) input {
+  font: inherit;
+}
+
+:where(.motion-study) button {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(.motion-study) .experience {
+  position: relative;
+  isolation: isolate;
+  width: 100vw;
+  height: 100svh;
+  min-height: 600px;
+  overflow: hidden;
+  background: var(--background);
+}
+
+:where(.motion-study) .scene,
+:where(.motion-study) .atmosphere,
+:where(.motion-study) .scanlines {
+  position: absolute;
+  inset: 0;
+}
+
+:where(.motion-study) .scene {
+  z-index: -3;
+}
+
+:where(.motion-study) .no-webgl {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  justify-items: center;
+  padding: 25vh 24px 18vh;
+  background:
+    radial-gradient(circle at 50% 48%, rgba(33, 91, 108, 0.38), transparent 32%),
+    linear-gradient(145deg, #050410, #0b0923);
+  color: var(--ink);
+  text-align: center;
+}
+
+:where(.motion-study) .no-webgl > span {
+  color: var(--pink);
+  font-size: clamp(2.6rem, 8vw, 5rem);
+  text-shadow: 0 0 28px var(--pink);
+}
+
+:where(.motion-study) .no-webgl h2 {
+  max-width: 620px;
+  margin: 18px 0 8px;
+  font-size: clamp(1.35rem, 4vw, 2.5rem);
+}
+
+:where(.motion-study) .no-webgl p {
+  max-width: 560px;
+  color: var(--muted);
+  line-height: 1.55;
+}
+
+:where(.motion-study) .no-webgl a,
+:where(.motion-study) .methodology-link {
+  color: var(--cyan);
+}
+
+:where(.motion-study) .view-network .scene canvas {
+  touch-action: none;
+  cursor: grab;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+:where(.motion-study) .view-network .scene canvas:active {
+  cursor: grabbing;
+}
+
+:where(.motion-study) .view-network.has-selection .scene canvas {
+  cursor: default;
+}
+
+:where(.motion-study) .atmosphere {
+  z-index: -2;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 52% 54%, transparent 0 22%, rgba(5, 4, 16, 0.34) 68%, #050410 112%),
+    linear-gradient(180deg, rgba(7, 5, 25, 0.78) 0%, transparent 23%, transparent 70%, rgba(5, 4, 16, 0.88) 100%);
+}
+
+:where(.motion-study) .scanlines {
+  z-index: -1;
+  opacity: 0.13;
+  pointer-events: none;
+  background: repeating-linear-gradient(
+    180deg,
+    transparent 0,
+    transparent 3px,
+    rgba(174, 203, 255, 0.12) 4px
+  );
+  mix-blend-mode: screen;
+}
+
+:where(.motion-study) .eyebrow,
+:where(.motion-study) footer {
+  font-family: 'DM Mono', ui-monospace, monospace;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+}
+
+:where(.motion-study) .eyebrow {
+  margin: 0 0 5px;
+  color: var(--cyan);
+  font-size: 0.77rem;
+  font-weight: 500;
+}
+
+:where(.motion-study) h1 {
+  margin: 0;
+  max-width: 520px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: clamp(1.75rem, 4vw, 4.2rem);
+  font-weight: 500;
+  letter-spacing: -0.055em;
+  line-height: 0.96;
+}
+
+@media (min-width: 1100px) {
+  :where(.motion-study) h1 {
+    max-width: 620px;
+  }
+
+  :where(.motion-study) .experience .train-search {
+    top: clamp(164px, 20vh, 190px);
+  }
+}
+
+:where(.motion-study) .train-search {
+  position: absolute;
+  top: clamp(112px, 17vh, 158px);
+  left: 50%;
+  width: min(540px, calc(100vw - 48px));
+  transform: translateX(-50%);
+  z-index: 8;
+}
+
+:where(.motion-study) .train-search form {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 46px;
+  border: 1px solid rgba(193, 204, 255, 0.25);
+  background: rgba(7, 7, 22, 0.68);
+  backdrop-filter: blur(16px);
+}
+
+:where(.motion-study) .train-search:focus-within form {
+  border-color: rgba(141, 250, 255, 0.64);
+  box-shadow: 0 0 28px rgba(69, 89, 156, 0.16);
+}
+
+:where(.motion-study) .search-mark {
+  position: relative;
+  width: 14px;
+  height: 14px;
+  margin-left: 15px;
+  border: 1px solid var(--cyan);
+  border-radius: 50%;
+  opacity: 0.8;
+}
+
+:where(.motion-study) .search-mark::after {
+  position: absolute;
+  right: -5px;
+  bottom: -3px;
+  width: 6px;
+  height: 1px;
+  background: var(--cyan);
+  transform: rotate(45deg);
+  content: '';
+}
+
+:where(.motion-study) .train-search label {
+  flex: 1;
+  min-width: 0;
+}
+
+:where(.motion-study) .train-search input[type='search'] {
+  width: 100%;
+  min-height: 44px;
+  padding: 0 14px;
+  border: 0;
+  outline: 0;
+  color: var(--ink);
+  background: transparent;
+  appearance: none;
+  font-family: 'DM Mono', ui-monospace, monospace;
+  font-size: 0.78rem;
+}
+
+:where(.motion-study) .train-search input[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+:where(.motion-study) .train-search input::placeholder {
+  color: rgba(229, 231, 255, 0.38);
+}
+
+:where(.motion-study) .train-search input:disabled {
+  color: rgba(229, 231, 255, 0.48);
+  cursor: default;
+}
+
+:where(.motion-study) .clear-search {
+  min-width: 42px;
+  min-height: 42px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 1.2rem;
+  justify-content: center;
+}
+
+:where(.motion-study) .clear-search:hover {
+  border: 0;
+  background: transparent;
+  color: var(--cyan);
+  transform: none;
+}
+
+:where(.motion-study) .search-results {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  left: 0;
+  max-height: min(360px, 52vh);
+  overflow-y: auto;
+  border: 1px solid rgba(193, 204, 255, 0.24);
+  background: rgba(6, 6, 20, 0.94);
+  backdrop-filter: blur(20px);
+}
+
+:where(.motion-study) .search-results > button {
+  display: grid;
+  grid-template-columns: 10px minmax(86px, auto) 1fr;
+  width: 100%;
+  min-height: 48px;
+  padding: 8px 12px;
+  gap: 10px;
+  border: 0;
+  border-bottom: 1px solid rgba(193, 204, 255, 0.11);
+  background: transparent;
+  text-align: left;
+}
+
+:where(.motion-study) .search-results > button:hover,
+:where(.motion-study) .search-results > button:focus-visible,
+:where(.motion-study) .search-results > button.is-active {
+  background: rgba(70, 72, 140, 0.28);
+  box-shadow: inset 2px 0 0 var(--cyan);
+  transform: none;
+}
+
+:where(.motion-study) .search-results > button[aria-selected='true'] {
+  background: rgba(70, 72, 140, 0.48);
+  color: #fff;
+  box-shadow: inset 4px 0 0 var(--cyan), 0 0 22px rgba(141, 250, 255, 0.12);
+  transform: none;
+}
+
+:where(.motion-study) .search-results p {
+  margin: 0;
+  padding: 16px;
+  color: var(--muted);
+  font-family: 'DM Mono', ui-monospace, monospace;
+  font-size: 0.72rem;
+}
+
+:where(.motion-study) .service-legend {
+  position: absolute;
+  right: clamp(24px, 4vw, 58px);
+  bottom: clamp(190px, 22vh, 225px);
+  left: clamp(24px, 4vw, 58px);
+  display: flex;
+  justify-content: center;
+  gap: 8px 16px;
+  max-width: 720px;
+  margin: auto;
+  color: rgba(229, 231, 255, 0.5);
+  font-family: 'DM Mono', ui-monospace, monospace;
+  font-size: 0.61rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  z-index: 2;
+}
+
+:where(.motion-study) .service-legend button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 8px;
+  border-color: transparent;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}
+
+:where(.motion-study) .service-legend button:hover,
+:where(.motion-study) .service-legend button[aria-pressed='true'] {
+  border-color: rgba(193, 204, 255, 0.2);
+  background: rgba(18, 16, 48, 0.62);
+  color: var(--ink);
+  transform: none;
+}
+
+:where(.motion-study) .service-legend button[aria-pressed='true'] {
+  border-color: var(--service-accent, var(--cyan));
+  background: color-mix(
+    in srgb,
+    var(--service-accent, var(--cyan)) 22%,
+    rgba(9, 8, 29, 0.88)
+  );
+  color: #fff;
+  box-shadow: inset 0 -2px 0 var(--service-accent, var(--cyan)),
+    0 0 24px color-mix(in srgb, var(--service-accent, var(--cyan)) 30%, transparent);
+  text-shadow: 0 0 10px color-mix(in srgb, var(--service-accent, var(--cyan)) 58%, transparent);
+}
+
+:where(.motion-study) .service-legend.has-filter button:not([aria-pressed='true']) {
+  opacity: 0.14;
+}
+
+:where(.motion-study) .service-legend i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  box-shadow: 0 0 8px currentColor;
+  transition: transform 180ms ease, box-shadow 180ms ease;
+}
+
+:where(.motion-study) .service-legend button[aria-pressed='true'] i {
+  box-shadow: 0 0 4px #fff, 0 0 16px var(--service-accent, var(--cyan));
+  transform: scale(1.45);
+}
+
+:where(.motion-study) input[type='range'] {
+  width: 100%;
+  height: 22px;
+  margin: 0;
+  appearance: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+:where(.motion-study) input[type='range']:disabled {
+  cursor: wait;
+  opacity: 0.35;
+}
+
+:where(.motion-study) .view-network .atmosphere {
+  background:
+    radial-gradient(circle at 50% 52%, transparent 0 28%, rgba(5, 4, 16, 0.26) 72%, #050410 120%),
+    linear-gradient(180deg, rgba(7, 5, 25, 0.8) 0%, transparent 21%, transparent 72%, rgba(5, 4, 16, 0.9) 100%);
+}
+
+:where(.motion-study) .view-hub .atmosphere {
+  background:
+    radial-gradient(circle at 50% 53%, transparent 0 19%, rgba(10, 4, 27, 0.3) 60%, #050410 112%),
+    linear-gradient(180deg, rgba(7, 5, 25, 0.84) 0%, transparent 25%, transparent 68%, rgba(5, 4, 16, 0.93) 100%);
+}
+
+:where(.motion-study) .has-selection .atmosphere {
+  background:
+    radial-gradient(circle at 55% 53%, transparent 0 18%, rgba(5, 4, 16, 0.24) 58%, #050410 110%),
+    linear-gradient(180deg, rgba(7, 5, 25, 0.84) 0%, transparent 22%, transparent 68%, rgba(5, 4, 16, 0.92) 100%);
+}
+
+:where(.motion-study) input[type='range']::-webkit-slider-runnable-track {
+  height: 1px;
+  background: linear-gradient(90deg, var(--cyan), rgba(160, 175, 225, 0.34));
+}
+
+:where(.motion-study) input[type='range']::-webkit-slider-thumb {
+  width: 12px;
+  height: 12px;
+  margin-top: -5.5px;
+  appearance: none;
+  border: 2px solid #fff;
+  border-radius: 50%;
+  background: var(--pink);
+  box-shadow: 0 0 16px var(--pink);
+}
+
+:where(.motion-study) button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 42px;
+  padding: 0 13px;
+  border: 1px solid var(--line);
+  color: var(--ink);
+  background: var(--panel);
+  backdrop-filter: blur(12px);
+  cursor: pointer;
+  font-size: 0.78rem;
+  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+}
+
+:where(.motion-study) button:hover {
+  border-color: rgba(141, 250, 255, 0.62);
+  background: rgba(26, 23, 64, 0.72);
+  transform: translateY(-1px);
+}
+
+:where(.motion-study) button:focus-visible,
+:where(.motion-study) input:focus-visible {
+  outline: 2px solid var(--cyan);
+  outline-offset: 3px;
+}
+
+:where(.motion-study) kbd {
+  margin-left: 5px;
+  padding: 2px 5px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  font-family: 'DM Mono', ui-monospace, monospace;
+  font-size: 0.58rem;
+}
+
+:where(.motion-study) footer a {
+  color: inherit;
+  text-decoration-color: rgba(141, 250, 255, 0.35);
+  text-underline-offset: 3px;
+}
+
+:where(.motion-study) footer a:hover {
+  color: var(--cyan);
+}
+
+:where(.motion-study) footer {
+  position: absolute;
+  right: clamp(24px, 4vw, 58px);
+  bottom: 22px;
+  left: clamp(24px, 4vw, 58px);
+  display: flex;
+  justify-content: space-between;
+  color: rgba(225, 224, 255, 0.34);
+  font-size: 0.58rem;
+}
+
+:where(.motion-study) .sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 700px) {
+  :where(html.motion-study),
+:where(.motion-study) body,
+:where(.motion-study) #root {
+    height: 100%;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  :where(.motion-study) .experience {
+    height: 100dvh;
+    min-height: 0;
+    overscroll-behavior: none;
+  }
+
+  :where(.motion-study) .eyebrow {
+    font-size: 0.67rem;
+  }
+
+  :where(.motion-study) h1 {
+    max-width: 148px;
+    font-size: clamp(1.55rem, 7vw, 1.9rem);
+  }
+
+  :where(.motion-study) .train-search {
+    top: calc(124px + env(safe-area-inset-top));
+    width: auto;
+    right: calc(16px + env(safe-area-inset-right));
+    left: calc(16px + env(safe-area-inset-left));
+    transform: none;
+  }
+
+  :where(.motion-study) .train-search form {
+    min-height: 48px;
+  }
+
+  :where(.motion-study) .search-mark {
+    margin-left: 12px;
+  }
+
+  :where(.motion-study) .train-search input[type='search'] {
+    min-height: 48px;
+    padding-right: 9px;
+    padding-left: 10px;
+    /* iOS zooms the whole page when an editable control is below 16px. */
+    font-size: 1rem;
+  }
+
+  :where(.motion-study) .clear-search {
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0;
+  }
+
+  :where(.motion-study) .search-results > button {
+    min-height: 52px;
+    grid-template-columns: 10px 76px 1fr;
+  }
+
+  :where(.motion-study) .search-results {
+    right: 0;
+    left: 0;
+    max-height: min(360px, calc(100dvh - 190px));
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :where(.motion-study) .service-legend {
+    right: calc(16px + env(safe-area-inset-right));
+    bottom: calc(300px + env(safe-area-inset-bottom));
+    left: calc(16px + env(safe-area-inset-left));
+    max-width: none;
+    justify-content: flex-start;
+    gap: 4px;
+    overflow-x: auto;
+    padding: 0 2px;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+    touch-action: pan-x;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :where(.motion-study) .service-legend::-webkit-scrollbar {
+    display: none;
+  }
+
+  :where(.motion-study) .service-legend button {
+    min-height: 44px;
+    flex: 0 0 auto;
+    padding: 0 10px;
+  }
+
+  :where(.motion-study) .view-network.has-selection .service-legend {
+    display: none;
+  }
+
+  :where(.motion-study) input[type='range'] {
+    height: 44px;
+  }
+
+  :where(.motion-study) input[type='range']::-webkit-slider-runnable-track {
+    height: 2px;
+  }
+
+  :where(.motion-study) input[type='range']::-webkit-slider-thumb {
+    width: 24px;
+    height: 24px;
+    margin-top: -11px;
+  }
+
+  :where(.motion-study) button {
+    min-height: 44px;
+    justify-content: center;
+  }
+
+  :where(.motion-study) footer {
+    right: calc(16px + env(safe-area-inset-right));
+    bottom: calc(8px + env(safe-area-inset-bottom));
+    left: calc(16px + env(safe-area-inset-left));
+    justify-content: flex-start;
+    font-size: 0.52rem;
+  }
+
+  :where(.motion-study) footer > span:last-child {
+    display: none;
+  }
+
+  :where(.motion-study) kbd {
+    display: none;
+  }
+}
+
+@media (max-width: 700px) and (max-height: 690px) {
+
+  :where(.motion-study) .service-legend {
+    bottom: calc(292px + env(safe-area-inset-bottom));
+  }
+}
+
+@media (max-width: 360px) {
+  :where(.motion-study) h1 {
+    max-width: 99px;
+    font-size: 1.25rem;
+  }
+
+  :where(.motion-study) .search-mark {
+    display: none;
+  }
+}
+
+@media (hover: none) {
+  :where(.motion-study) button:hover {
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+  :where(.motion-study) button {
+    transition: none;
+  }
+}
+@media (max-width: 700px) {
+
+  :where(.motion-study) .eyebrow {
+    margin-bottom: 2px;
+    font-size: 0.58rem;
+  }
+
+  :where(.motion-study) h1 {
+    max-width: 172px;
+    font-size: clamp(1.2rem, 6vw, 1.52rem);
+    line-height: 0.94;
+  }
+
+  :where(.motion-study) .train-search {
+    top: calc(80px + env(safe-area-inset-top));
+    right: calc(12px + env(safe-area-inset-right));
+    left: calc(12px + env(safe-area-inset-left));
+  }
+
+  :where(.motion-study) .train-search form,
+:where(.motion-study) .train-search input[type='search'] {
+    min-height: 44px;
+  }
+
+  :where(.motion-study) .train-search input[type='search'] {
+    padding: 0 8px;
+    font-size: 1rem;
+  }
+
+  :where(.motion-study) .search-mark {
+    width: 12px;
+    height: 12px;
+    margin-left: 11px;
+  }
+
+  :where(.motion-study) .clear-search {
+    min-width: 40px;
+    min-height: 42px;
+  }
+
+  :where(.motion-study) .service-legend {
+    display: none;
+  }
+
+  :where(.motion-study) footer {
+    display: none;
+  }
+}
+
+@media (max-width: 360px) {
+  :where(.motion-study) .train-search {
+    top: calc(76px + env(safe-area-inset-top));
+  }
+
+  :where(.motion-study) .search-mark {
+    display: none;
+  }
+}

package/tokens.css

@@ -0,0 +1,17 @@
+:root {
+  color: var(--ink);
+  background: var(--background);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  --background: #050410;
+  --ink: #f8f7ff;
+  --muted: rgba(229, 231, 255, 0.58);
+  --line: rgba(193, 204, 255, 0.2);
+  --cyan: #8dfaff;
+  --pink: #ff5edb;
+  --panel: rgba(7, 7, 22, 0.58);
+  --air: #ff5edb;
+  --road-light: #fff1cf;
+  --road-heavy: #ff9d52;
+}

package/use-local-performance.d.ts

@@ -0,0 +1,5 @@
+export interface LocalPerformanceSample {
+    readonly fps: number;
+    readonly slowFramePercent: number;
+}
+export declare function useLocalPerformance(enabled: boolean): LocalPerformanceSample | undefined;