feat(ui): add narrator talkie overlay

2026-06-01 01:32:46 +02:00
parent bc862960a7
commit dcf3a8564c
3 changed files with 207 additions and 0 deletions
@@ -1237,6 +1237,111 @@ canvas {
  color: #f9a8d4;
 }

+/* Dialogue talkie */
+.talkie-dialogue-overlay {
+  position: fixed;
+  left: clamp(12px, 2.2vw, 28px);
+  bottom: clamp(24px, 7vh, 76px);
+  z-index: 16;
+  width: clamp(120px, 13vw, 190px);
+  aspect-ratio: 1;
+  pointer-events: none;
+  transform: translateY(0);
+  transition: transform 180ms ease;
+}
+
+.talkie-dialogue-overlay--raised {
+  transform: translateY(-10px);
+}
+
+.talkie-dialogue-overlay__model-frame {
+  position: absolute;
+  inset: 0;
+  animation: talkie-radio-shake 1s ease-in-out infinite;
+  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.55));
+}
+
+.talkie-dialogue-overlay__model-frame canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.talkie-dialogue-overlay__signals {
+  position: absolute;
+  right: -26%;
+  bottom: 34%;
+  z-index: 2;
+  width: 58%;
+  height: 78%;
+  overflow: visible;
+  opacity: 0.8;
+  animation: talkie-signal-pulse 1s ease-in-out infinite;
+}
+
+.talkie-dialogue-overlay__signals path {
+  fill: none;
+  stroke: rgba(235, 244, 255, 0.9);
+  stroke-linecap: round;
+  stroke-width: 5;
+  filter: drop-shadow(0 0 7px rgba(125, 211, 252, 0.72));
+}
+
+.talkie-dialogue-overlay__signals path:nth-child(2) {
+  animation-delay: 90ms;
+  opacity: 0.75;
+}
+
+.talkie-dialogue-overlay__signals path:nth-child(3) {
+  animation-delay: 180ms;
+  opacity: 0.55;
+}
+
+@keyframes talkie-radio-shake {
+  0%,
+  11%,
+  23%,
+  100% {
+    transform: translate3d(0, 0, 0) rotate(0deg);
+  }
+
+  3%,
+  15%,
+  27% {
+    transform: translate3d(-2px, 1px, 0) rotate(-1.7deg);
+  }
+
+  6%,
+  18%,
+  30% {
+    transform: translate3d(2px, -1px, 0) rotate(1.7deg);
+  }
+
+  9%,
+  21%,
+  33% {
+    transform: translate3d(-1px, 0, 0) rotate(-0.8deg);
+  }
+}
+
+@keyframes talkie-signal-pulse {
+  0%,
+  100% {
+    opacity: 0.28;
+    transform: translate3d(-4px, 4px, 0) scale(0.92);
+  }
+
+  18%,
+  38% {
+    opacity: 0.95;
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+
+  60% {
+    opacity: 0.45;
+    transform: translate3d(4px, -6px, 0) scale(1.05);
+  }
+}
+
 /* In-game settings menu */
 .game-settings-menu {
  position: fixed;