Make the playback-control demo visually more compelling

Author: bramus

demo/playback-control/demo.html

@@ -16,12 +16,15 @@
     import { getAnimations, ViewTransitionPart } from '../js/animations.js';
 
     // The View Transition and one of its animations to track
-    let t, a;
+    let t, a, rAFHandle;
 
     const syncProgressToSlider = () => {
-      document.getElementById("scrub").value = a.effect.getComputedTiming().progress.toFixed(2);
-      requestAnimationFrame(syncProgressToSlider);
-    }
+      const val = a.effect.getComputedTiming().progress.toFixed(2);
+      document.getElementById("scrub").value = val;
+      const valEl = document.getElementById("slider-val");
+      if (valEl) valEl.innerText = val;
+      rAFHandle = requestAnimationFrame(syncProgressToSlider);
+    };
 
     // When clicking the start button, start a View Transition
     document.getElementById("start").addEventListener("click", async () => {
@@ -31,14 +34,14 @@
       document.getElementById("scrub").disabled = true;
 
       t = document.startViewTransition(() => {
-        document.querySelector('.box').classList.toggle('supergreen');
+        document.querySelector('.track').classList.toggle('supergreen');
       });
 
       t.ready.then(() => {
         a = getAnimations(t, 'box', ViewTransitionPart.Group)[0];
 
         // Start a rAF with syncProgressToSlider
-        requestAnimationFrame(syncProgressToSlider);
+        rAFHandle = requestAnimationFrame(syncProgressToSlider);
       });
 
       t.finished.then(() => {
@@ -47,8 +50,11 @@
         document.getElementById("resume").disabled = true;
         document.getElementById("scrub").disabled = true;
 
+        const valEl = document.getElementById("slider-val");
+        if (valEl) valEl.innerText = "0.00";
+
         // Stop the rAF
-        cancelAnimationFrame(syncProgressToSlider);
+        cancelAnimationFrame(rAFHandle);
       });
     });
 
@@ -63,7 +69,7 @@
       pause(t);
 
       // Stop the rAF
-      cancelAnimationFrame(syncProgressToSlider);
+      cancelAnimationFrame(rAFHandle);
     });
 
     // When clicking the resume button, unpause the View Transition
@@ -76,12 +82,14 @@
       resume(t);
 
       // Start a rAF with syncProgressToSlider
-      requestAnimationFrame(syncProgressToSlider);
+      rAFHandle = requestAnimationFrame(syncProgressToSlider);
     });
 
     // When moving the slider, scrub the View Transition
     document.getElementById("scrub").addEventListener("input", (e) => {
       scrub(t, e.target.value);
+      const valEl = document.getElementById("slider-val");
+      if (valEl) valEl.innerText = Number(e.target.value).toFixed(2);
     });
   </script>
   <style>
@@ -95,7 +103,7 @@
       pointer-events: none;
     }
     ::view-transition-group(*) {
-      animation-duration: 5s;
+      animation-duration: 3s;
     }
 
     * {
@@ -106,41 +114,186 @@
 
     html {
       font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      background-color: #f8fafc;
+      height: 100%;
     }
 
-    select, input {
-      font-family: inherit;
+    body {
+      height: 100%;
+      display: grid;
+      place-content: safe center;
+      padding: 5vw 0;
     }
 
-    html, body {
-      height: 100%;
+    .container {
+      background: white;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: 24px;
+      padding: 3rem;
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2.5rem;
+      max-width: 450px;
+      width: 90vw;;
     }
 
-    body {
+    .track {
+      width: 100%;
+      aspect-ratio: 1;
+      background: #f1f5f9;
+      border-radius: 16px;
       display: grid;
-      place-content: center;
+      place-content: start;
+      padding: 1.5rem;
+      border: 1px solid rgba(0, 0, 0, 0.05);
+    }
+
+    .track.supergreen {
+      place-content: end;
     }
 
     .box {
-      height: 2em;
-      width: 2em;
-      background: blue;
+      height: 80px;
+      width: 80px;
+      background: cornflowerblue;
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      font-size: 1rem;
+    }
 
-      &.supergreen {
-        background: green;
-        margin-left: auto;
+    .controls-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 1rem;
+      width: 100%;
+    }
+
+    @media (max-width: 599px) {
+      .controls-grid {
+        grid-template-columns: 1fr;
       }
     }
+
+    button {
+      padding: 0.75rem 1rem;
+      border: 1px solid rgba(148, 163, 184, 0.2);
+      border-radius: 12px;
+      background: white;
+      color: #334155;
+      font-weight: 600;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      font-family: inherit;
+      font-size: 0.9rem;
+    }
+
+    button:hover:not(:disabled) {
+      background: #f8fafc;
+      border-color: #38bdf8;
+      color: #0284c7;
+      transform: translateY(-2px);
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+
+    button:active:not(:disabled) {
+      transform: translateY(0);
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      background: #f1f5f9;
+      color: #94a3b8;
+    }
+
+    button#start {
+      background: #0f172a;
+      color: white;
+      border: none;
+    }
+
+    button#start:hover:not(:disabled) {
+      background: #1e293b;
+      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.3);
+    }
+
+    .slider-container {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .slider-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      color: #64748b;
+      font-size: 0.85rem;
+      font-weight: 500;
+    }
+
+    input[type="range"] {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 100%;
+      height: 6px;
+      background: #e2e8f0;
+      border-radius: 3px;
+      outline: none;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 18px;
+      height: 18px;
+      background: #38bdf8;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      box-shadow: 0 4px 6px rgba(56, 189, 248, 0.3);
+    }
+
+    input[type="range"]::-webkit-slider-thumb:hover {
+      transform: scale(1.2);
+    }
+
+    input[type="range"]:disabled::-webkit-slider-thumb {
+      background: #94a3b8;
+      cursor: not-allowed;
+      box-shadow: none;
+    }
   </style>
 </head>
 <body>
-  <div>
-    <div class="box"></div>
+  <div class="container">
+    <div class="track">
+      <div class="box">BOX</div>
+    </div>
+
+    <div class="controls-grid">
+      <button id="start">Start</button>
+      <button id="pause" disabled>Pause</button>
+      <button id="resume" disabled>Resume</button>
+    </div>
 
-    <button id="start">Start VT</button>
-    <button id="pause" disabled>Pause VT</button>
-    <button id="resume" disabled>Resume VT</button>
-    <input id="scrub" type="range" min="0" max="1" step="0.01" value="0" disabled>
+    <div class="slider-container">
+      <div class="slider-header">
+        <span>Scrub Progress</span>
+        <span id="slider-val">0.00</span>
+      </div>
+      <input id="scrub" type="range" min="0" max="1" step="0.01" value="0" disabled>
+    </div>
   </div>
 </body>
 </html>