Refine interaction hints

Author: Tom Notch

public/spherical-viewer/index.html

@@ -92,9 +92,11 @@
       }
       .usf-interaction-hint {
         position: absolute;
-        bottom: 10%;
+        top: 50%;
         left: 50%;
-        transform: translateX(-50%);
+        transform: translate(-50%, -50%);
+        width: 64px;
+        height: 88px;
         pointer-events: none;
         opacity: 0;
         transition: opacity 0.4s;
@@ -103,21 +105,41 @@
       .usf-interaction-hint.visible {
         opacity: 1;
       }
-      .usf-hint-hand {
+      .usf-hint-hand-wrap {
+        position: absolute;
+        inset: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        transition: opacity 0.35s ease;
+      }
+      .usf-interaction-hint.visible .usf-hint-hand-wrap {
+        opacity: 1;
+      }
+      .usf-hint-hand--pan {
         width: 50px;
         height: 72px;
-        animation: usf-swipe 2.4s ease-in-out;
+        transform: translateX(0) scale(1.16);
+        transform-origin: center center;
+        /* forwards: avoid snap to scale(1) when non-infinite animation ends */
+        animation: usf-swipe 2.4s ease-in-out forwards;
       }
       @keyframes usf-swipe {
         0%,
         100% {
-          transform: translateX(0);
+          transform: translateX(0) scale(1.16);
         }
         30% {
-          transform: translateX(24px);
+          transform: translateX(26px) scale(1.16);
         }
         60% {
-          transform: translateX(-24px);
+          transform: translateX(-26px) scale(1.16);
+        }
+      }
+      @media (prefers-reduced-motion: reduce) {
+        .usf-hint-hand--pan {
+          animation: none !important;
         }
       }
     </style>

public/spherical-viewer/viewer.js

@@ -200,7 +200,10 @@ function showInteractionHint(container, theme) {
   const dark = theme === "dark";
   const wrap = document.createElement("div");
   wrap.className = "usf-interaction-hint";
-  wrap.innerHTML = `<div class="usf-hint-hand">${handSVG(dark)}</div>`;
+  wrap.innerHTML =
+    `<div class="usf-hint-hand-wrap">` +
+    `<div class="usf-hint-hand usf-hint-hand--pan">${handSVG(dark)}</div>` +
+    `</div>`;
   container.appendChild(wrap);
   return wrap;
 }
@@ -644,30 +647,52 @@ async function main() {
   let hintDismissed = hintAlreadyDismissed;
   let hintTimers = [];
 
-  const hintHand = hint.querySelector(".usf-hint-hand");
+  const hintPanInner = hint.querySelector(".usf-hint-hand--pan");
+
+  const restartPanAnim = () => {
+    hintPanInner.style.animation = "none";
+    void hintPanInner.offsetWidth;
+    hintPanInner.style.animation = "";
+  };
 
   if (hintAlreadyDismissed) {
     hint.remove();
   } else {
-    const scheduleHintPulse = () => {
+    const PAN_MS = 2800;
+    const FADE_MS = 450;
+    const GAP_MS = 2800;
+    const INITIAL_DELAY_MS = 800;
+
+    const scheduleHintCycle = (isFirstCycle) => {
       if (hintDismissed) return;
-      const t1 = setTimeout(() => {
-        if (hintDismissed) return;
-        hintHand.style.animation = "none";
-        void hintHand.offsetWidth;
-        hintHand.style.animation = "";
-        hint.classList.add("visible");
-      }, 800);
-      const t2 = setTimeout(() => {
-        if (hintDismissed) return;
-        hint.classList.remove("visible");
-        const t3 = setTimeout(() => scheduleHintPulse(), 3000);
-        hintTimers.push(t3);
-      }, 3600);
-      hintTimers.push(t1, t2);
+      let acc = isFirstCycle ? INITIAL_DELAY_MS : GAP_MS;
+
+      hintTimers.push(
+        setTimeout(() => {
+          if (hintDismissed) return;
+          restartPanAnim();
+          hint.classList.add("visible");
+        }, acc),
+      );
+
+      acc += PAN_MS;
+      hintTimers.push(
+        setTimeout(() => {
+          if (hintDismissed) return;
+          hint.classList.remove("visible");
+        }, acc),
+      );
+
+      acc += FADE_MS;
+      hintTimers.push(
+        setTimeout(() => {
+          if (hintDismissed) return;
+          scheduleHintCycle(false);
+        }, acc),
+      );
     };
 
-    scheduleHintPulse();
+    scheduleHintCycle(true);
 
     const dismissHint = (broadcast = true) => {
       hintDismissed = true;