fix(website): improve mobile cards, disclosures and app scrolling

website/src/components/home/Cleanup.astro

@@ -105,23 +105,20 @@ const icons = [
             <p class="polish-hint"><span aria-hidden="true">⇄</span>Swipe, or use the arrows</p>
           </div>
         </div>
-      </div><div class="polish-guards" id="polish-guards" data-open="true">
-        <button
-          class="polish-guards-toggle"
-          aria-expanded="true"
-          aria-controls="polish-guard-notes"
-          hidden
-          ><span>What each one means</span><i class="polish-guard-mark" aria-hidden="true"
-          ></i></button
-        ><div class="polish-guard-row" id="polish-guard-notes">
+      </div><div class="polish-guards" id="polish-guards">
+        <p class="polish-guards-heading">What each one means</p>
+        <div class="polish-guard-row" id="polish-guard-notes">
           {
             polish.guards.map((guard) => (
-              <div class="polish-guard">
+              <details class="polish-guard">
                 <>
-                  <p class="polish-guard-name">{guard.name}</p>
+                  <summary class="polish-guard-name">
+                    <span>{guard.name}</span>
+                    <i class="polish-guard-mark" aria-hidden="true" />
+                  </summary>
                   <p class="polish-guard-note">{guard.note}</p>
                 </>
-              </div>
+              </details>
             ))
           }
         </div>

website/src/components/home/CompatibleApps.astro

@@ -3,7 +3,9 @@ import apps from '../../data/home/compatibleApps.json';
 ---
 
 <aside class="compatible-strip" id="apps" aria-labelledby="compatible-title">
-  <p id="compatible-title">Works in the apps you already use.</p>
+  <div class="wrap">
+    <p class="eyebrow" id="compatible-title">Works in the apps you already use</p>
+  </div>
   <div
     class="compatible-viewport"
     tabindex="0"

website/src/components/home/UseCases.astro

@@ -40,26 +40,30 @@ const first = cases[0];
         ))
       }
     </div>
-    <div class="case-stage" data-case="0" data-case-assets={JSON.stringify(assets)}>
-      <div class="case-copy">
-        <h3>{first.title}</h3><p>{first.note}</p><span class="case-status"
-          >{first.sampleLabel || ''}</span
-        >
-      </div><figure class="case-person">
-        <img
-          class="case-scene"
-          src={assets[0].src}
-          srcset={assets[0].srcset}
-          sizes="(max-width:600px) 100vw, 50vw"
-          width={assets[0].width}
-          height={assets[0].height}
-          loading="lazy"
-          decoding="async"
-          alt="Illustrated developer speaking toward a computer"
-        />
-      </figure><div class="case-screen" data-phase="finished">
-        <AppDemo app="vscode" text={first.final} />
+    <div class="case-frame">
+      <div class="case-stage" data-case="0" data-case-assets={JSON.stringify(assets)}>
+        <div class="case-copy">
+          <h3>{first.title}</h3><p>{first.note}</p><span class="case-status"
+            >{first.sampleLabel || ''}</span
+          >
+        </div><figure class="case-person">
+          <img
+            class="case-scene"
+            src={assets[0].src}
+            srcset={assets[0].srcset}
+            sizes="(max-width:600px) 100vw, 50vw"
+            width={assets[0].width}
+            height={assets[0].height}
+            loading="lazy"
+            decoding="async"
+            draggable="false"
+            alt="Illustrated developer speaking toward a computer"
+          />
+        </figure><div class="case-screen" data-phase="finished">
+          <AppDemo app="vscode" text={first.final} />
+        </div>
       </div>
+      <p class="case-swipe-hint" aria-hidden="true">Swipe to explore more ways to use it ↔</p>
     </div>
     <div class="case-controls">
       <div>

website/src/components/home/Workflow.astro

@@ -17,14 +17,7 @@ import Icon from './Icon.astro';
       transcription and your choice of local or cloud AI polish.
     </p>
   </div>
-  <p class="mobile-swipe-hint">
-    Swipe through the five steps <span aria-hidden="true">↔</span>
-  </p><ol
-    class="hood-steps swipe-row"
-    id="hood-steps"
-    tabindex="0"
-    aria-label="Five workflow steps"
-  >
+  <ol class="hood-steps" id="hood-steps" aria-label="Five workflow steps">
     {
       hood.steps.map((step, i) => (
         <li class:list={['hood-step', 'is-' + step.where]}>

website/src/scripts/home/apps.js

@@ -5,11 +5,15 @@ export function init(root, motion, scope) {
   duplicate.classList.add('compatible-duplicate');
   duplicate.setAttribute('aria-hidden', 'true');
   list.after(duplicate);
-  const manual = matchMedia('(max-width:999px), (pointer:coarse)');
+  scope.defer(() => duplicate.remove());
   let hovered = false,
+    touching = false,
+    dragging = false,
+    settling = false,
+    settleTimer,
     offset = viewport.scrollLeft;
   const clock = scope.timeline(root, (delta) => {
-    if (manual.matches || hovered) return false;
+    if (hovered || touching || dragging || settling) return false;
     const width = list.offsetWidth;
     if (!width) return false;
     offset = (offset + delta * 0.025) % width;
@@ -20,24 +24,94 @@ export function init(root, motion, scope) {
     offset = viewport.scrollLeft;
     clock.wake();
   }
+  function finishInteraction() {
+    if (touching || dragging) return;
+    clearTimeout(settleTimer);
+    settling = false;
+    resume();
+  }
+  function settle() {
+    settling = true;
+    clearTimeout(settleTimer);
+    if (!touching && !dragging) settleTimer = setTimeout(finishInteraction, 180);
+  }
+  const passive = { passive: true, signal: scope.signal };
   viewport.addEventListener(
-    'mouseenter',
-    () => {
-      hovered = true;
+    'pointerenter',
+    (event) => {
+      if (event.pointerType === 'mouse') hovered = true;
     },
-    { signal: scope.signal },
+    passive,
   );
   viewport.addEventListener(
-    'mouseleave',
-    () => {
+    'pointerleave',
+    (event) => {
+      if (event.pointerType !== 'mouse') return;
       hovered = false;
       resume();
     },
-    { signal: scope.signal },
+    passive,
+  );
+  viewport.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (event.pointerType !== 'touch') {
+        dragging = true;
+        settle();
+      }
+    },
+    passive,
+  );
+  for (const eventName of ['pointerup', 'pointercancel']) {
+    window.addEventListener(
+      eventName,
+      (event) => {
+        if (event.pointerType === 'touch' || !dragging) return;
+        dragging = false;
+        settle();
+      },
+      passive,
+    );
+  }
+  // Native panning cancels pointer events before the finger is lifted.
+  viewport.addEventListener(
+    'touchstart',
+    () => {
+      hovered = false;
+      touching = true;
+      settle();
+    },
+    passive,
+  );
+  for (const eventName of ['touchend', 'touchcancel']) {
+    window.addEventListener(
+      eventName,
+      (event) => {
+        if (!touching) return;
+        touching = event.touches.length > 0;
+        settle();
+      },
+      passive,
+    );
+  }
+  viewport.addEventListener('wheel', settle, passive);
+  viewport.addEventListener(
+    'scroll',
+    () => {
+      if (settling) settle();
+    },
+    passive,
+  );
+  viewport.addEventListener(
+    'scrollend',
+    () => {
+      if (settling) finishInteraction();
+    },
+    passive,
   );
   viewport.addEventListener('focusout', resume, { signal: scope.signal });
-  manual.addEventListener('change', resume, { signal: scope.signal });
   const observer = new ResizeObserver(resume);
   observer.observe(list);
   scope.defer(() => observer.disconnect());
+  scope.defer(() => clearTimeout(settleTimer));
 }

website/src/scripts/home/cases.js

@@ -1,5 +1,6 @@
 import cases from '../../data/home/cases.json';
 import { mountDemo } from './demo.js';
+import { bindSwipe } from './swipe.js';
 const apps = ['vscode', 'clinical', 'keep', 'gmail', 'docs', 'slack', 'discord', 'notes', 'teams'];
 export function init(root, motion, scope) {
   const stage = root.querySelector('.case-stage'),
@@ -151,15 +152,16 @@ export function init(root, motion, scope) {
     { signal: scope.signal },
   );
   stage.addEventListener(
-    'mouseenter',
-    () => {
-      hovered = true;
+    'pointerenter',
+    (event) => {
+      if (event.pointerType === 'mouse') hovered = true;
     },
     { signal: scope.signal },
   );
   stage.addEventListener(
-    'mouseleave',
-    () => {
+    'pointerleave',
+    (event) => {
+      if (event.pointerType !== 'mouse') return;
       hovered = false;
       clock.wake();
     },
@@ -179,4 +181,18 @@ export function init(root, motion, scope) {
     },
     render,
   );
+  bindSwipe(
+    stage,
+    scope,
+    (direction) => {
+      choose(Math.max(0, Math.min(cases.length - 1, index + direction)), true);
+    },
+    (event) => {
+      auto = false;
+      if (event.pointerType !== 'mouse') hovered = false;
+      elapsed = Math.max(elapsed, 5400);
+      tour.textContent = 'Play tour';
+      render();
+    },
+  );
 }

website/src/scripts/home/cleanup.js

@@ -1,6 +1,7 @@
 import polish from '../../data/home/polish.json';
 import paths from '../../data/home/icons.json';
 import { renderTokens } from '../../utils/home/text.js';
+import { bindSwipe } from './swipe.js';
 const icons = [
   'person',
   'wave',
@@ -100,27 +101,6 @@ export function init(root, motion, scope) {
     },
     { signal: scope.signal },
   );
-  let touch;
-  card.addEventListener(
-    'touchstart',
-    (event) => {
-      const p = event.changedTouches[0];
-      touch = { x: p.clientX, y: p.clientY };
-    },
-    { signal: scope.signal, passive: true },
-  );
-  card.addEventListener(
-    'touchend',
-    (event) => {
-      if (!touch) return;
-      const p = event.changedTouches[0],
-        dx = p.clientX - touch.x,
-        dy = p.clientY - touch.y;
-      touch = null;
-      if (Math.abs(dx) > 44 && Math.abs(dx) > Math.abs(dy)) choose(index + (dx < 0 ? 1 : -1));
-    },
-    { signal: scope.signal, passive: true },
-  );
   clock = scope.timeline(
     root,
     (delta) => {
@@ -143,18 +123,15 @@ export function init(root, motion, scope) {
       }
     },
   );
-  const guards = root.querySelector('#polish-guards'),
-    toggle = guards.querySelector('button');
-  function setGuards(open) {
-    guards.dataset.open = String(open);
-    toggle.setAttribute('aria-expanded', String(open));
-  }
-  toggle.addEventListener(
-    'click',
-    () => setGuards(toggle.getAttribute('aria-expanded') !== 'true'),
-    { signal: scope.signal },
+  bindSwipe(
+    card,
+    scope,
+    (direction) => choose(index + direction),
+    () => {
+      pinned = true;
+      reveal = 0;
+      raw.classList.add('is-live');
+    },
   );
-  toggle.hidden = false;
-  setGuards(false);
   show(0);
 }