Merge pull request #21 from hoangsonww/fix/fix-index

fix: speed up reveal animations and update demo video sources

Author: hoangsonww

index.html

@@ -266,17 +266,20 @@ <h3>Run these for yourself</h3>
 
     <div class="code-win" style="margin: 0 0 32px; display: flex; flex-direction: column;">
       <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">REPL demo · forge</span></div>
-      <video src="images/REPL.mp4" poster="images/repl.png" controls muted playsinline preload="metadata"
+      <video src="https://github.com/user-attachments/assets/eb592bbf-62a1-4d74-a540-7e066ebe56a4
+" poster="images/repl.png" controls muted playsinline preload="metadata"
              style="display:block;width:100%;max-height:70vh;height:auto;object-fit:contain;background:#000"></video>
     </div>
     <div class="code-win" style="margin: 0 0 32px; display: flex; flex-direction: column;">
       <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">CLI demo · forge run</span></div>
-      <video src="images/CLI.mp4" poster="images/cli.png" controls muted playsinline preload="metadata"
+      <video src="https://github.com/user-attachments/assets/bc3b3204-fd87-436f-9467-604535edb4e2
+" poster="images/cli.png" controls muted playsinline preload="metadata"
              style="display:block;width:100%;max-height:70vh;height:auto;object-fit:contain;background:#000"></video>
     </div>
     <div class="code-win" style="margin: 0; display: flex; flex-direction: column;">
       <div class="titlebar"><div class="traffic"><i></i><i></i><i></i></div><span class="ttl">Web dashboard demo · forge ui start</span></div>
-      <video src="images/UI.mp4" poster="images/ui.png" controls muted playsinline preload="metadata"
+      <video src="https://github.com/user-attachments/assets/218cd64f-40fe-4836-9c62-c7a08538056b
+" poster="images/ui.png" controls muted playsinline preload="metadata"
              style="display:block;width:100%;height:auto;background:#000"></video>
     </div>
   </div>

wiki/app.js

@@ -252,26 +252,29 @@ revealTargets.forEach((el) => {
   el.setAttribute('data-reveal', '');
 });
 
-/* Stagger grid children so they reveal in a cascade, not a slab. */
+/* Stagger grid children so they reveal in a cascade, not a slab.
+   Delays deliberately shallow and capped at item #5 so large grids don't
+   take a full second before the last card appears — the user was
+   previously waiting ~880ms for an 8-card grid to finish. */
 document.querySelectorAll('.grid').forEach((grid) => {
   Array.from(grid.children).forEach((child, i) => {
     if (child.hasAttribute('data-reveal')) {
-      child.style.setProperty('--reveal-delay', `${Math.min(i, 8) * 110}ms`);
+      child.style.setProperty('--reveal-delay', `${Math.min(i, 5) * 40}ms`);
     }
   });
 });
 document.querySelectorAll('.bars').forEach((bars) => {
   Array.from(bars.children).forEach((row, i) => {
     if (row.hasAttribute('data-reveal')) {
-      row.style.setProperty('--reveal-delay', `${Math.min(i, 8) * 90}ms`);
+      row.style.setProperty('--reveal-delay', `${Math.min(i, 5) * 30}ms`);
     }
   });
 });
 /* Hero stats always cascade even though they're above the fold. */
 document.querySelectorAll('.hero-stats').forEach((row) => {
   Array.from(row.children).forEach((stat, i) => {
     if (stat.hasAttribute('data-reveal')) {
-      stat.style.setProperty('--reveal-delay', `${i * 120}ms`);
+      stat.style.setProperty('--reveal-delay', `${i * 50}ms`);
     }
   });
 });
@@ -285,7 +288,11 @@ if ('IntersectionObserver' in window && revealTargets.length) {
         revealIO.unobserve(entry.target);
       }
     },
-    { threshold: 0.12, rootMargin: '0px 0px -8% 0px' },
+    // Trigger earlier: fire as soon as any pixel enters the viewport,
+    // and pre-reveal a band above the fold (240px) so elements finish
+    // animating right as the user scrolls them into view instead of
+    // starting the animation only once they're already on screen.
+    { threshold: 0, rootMargin: '0px 0px 240px 0px' },
   );
   revealTargets.forEach((el) => revealIO.observe(el));
 } else {

wiki/styles.css

@@ -1400,12 +1400,14 @@ footer a {
 
 [data-reveal] {
   opacity: 0;
-  transform: translate3d(0, 48px, 0) scale(.94);
-  filter: blur(8px);
+  transform: translate3d(0, 24px, 0) scale(.97);
+  filter: blur(4px);
+  /* Snappier reveal: durations roughly halved so elements don't feel like
+     they're floating in over a full second. Delay still honored via JS. */
   transition:
-    opacity .9s var(--ease) var(--reveal-delay, 0ms),
-    transform 1s var(--ease-snap) var(--reveal-delay, 0ms),
-    filter .8s var(--ease) var(--reveal-delay, 0ms);
+    opacity .45s var(--ease) var(--reveal-delay, 0ms),
+    transform .5s var(--ease-snap) var(--reveal-delay, 0ms),
+    filter .35s var(--ease) var(--reveal-delay, 0ms);
   will-change: opacity, transform, filter;
 }
 
@@ -1418,11 +1420,11 @@ footer a {
 /* Cards get a short extra slide from the side depending on column position —
    gives a gentle cascade instead of a flat sweep. */
 .grid > [data-reveal] {
-  transform: translate3d(-12px, 56px, 0) scale(.92);
+  transform: translate3d(-6px, 28px, 0) scale(.96);
 }
 
 .grid > [data-reveal]:nth-child(even) {
-  transform: translate3d(12px, 56px, 0) scale(.92);
+  transform: translate3d(6px, 28px, 0) scale(.96);
 }
 
 .grid > [data-reveal].is-visible {