Wider gallery layout + larger thumbnails + live nav previews

Gallery page:
- Grid max-width: 1140px → 1600px (1900px on ultrawide)
- Card min-width: 340px → 420px (450px on ultrawide)
- Thumbnail aspect ratio: 16:9 → 4:3 (taller, more visible)
- Filters and pagination also widened to 1600px

Animation page navigation:
- Prev/Next links now show live iframe thumbnail previews of the
  adjacent animation (scaled to 80x50px via CSS transform)
- Labels show direction ("← Previous" / "Next →") and animation name
- Larger click targets with thumbnail + text layout

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: danlex

index.html

@@ -117,11 +117,14 @@
     }
     .grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
-      gap: 28px;
-      max-width: 1140px;
+      grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+      gap: 32px;
+      max-width: 1600px;
       width: 100%;
     }
+    @media (min-width: 1800px) {
+      .grid { max-width: 1900px; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
+    }
     .card {
       position: relative;
       border: 1px solid rgba(255,255,255,0.05);
@@ -142,7 +145,7 @@
     .card:hover .play-hint { opacity: 1; }
     .card-preview {
       width: 100%;
-      aspect-ratio: 16/9;
+      aspect-ratio: 4/3;
       position: relative;
       overflow: hidden;
       background: #000;
@@ -229,7 +232,7 @@
       gap: 8px;
       flex-wrap: wrap;
       justify-content: center;
-      max-width: 1140px;
+      max-width: 1600px;
       width: 100%;
       margin-bottom: 40px;
     }
@@ -263,7 +266,7 @@
       gap: 6px;
       justify-content: center;
       margin-top: 40px;
-      max-width: 1140px;
+      max-width: 1600px;
       width: 100%;
       flex-wrap: wrap;
     }

shared-ui.js

@@ -46,9 +46,73 @@
       border-color: rgba(255,255,255,0.06) !important;
       box-shadow: 0 4px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.03);
     }
+    /* Enhanced prev/next navigation */
+    .page-nav a {
+      display: flex !important;
+      align-items: center !important;
+      gap: 10px !important;
+      max-width: 280px !important;
+      padding: 8px 14px !important;
+    }
+    .page-nav a .nav-thumb {
+      width: 80px;
+      height: 50px;
+      border-radius: 6px;
+      overflow: hidden;
+      flex-shrink: 0;
+      background: rgba(255,255,255,0.03);
+      border: 1px solid rgba(255,255,255,0.06);
+    }
+    .page-nav a .nav-thumb iframe {
+      width: 320px;
+      height: 200px;
+      border: none;
+      transform: scale(0.25);
+      transform-origin: top left;
+      pointer-events: none;
+    }
+    .page-nav a .nav-label {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      overflow: hidden;
+    }
+    .page-nav a .nav-dir {
+      font-size: 8px;
+      letter-spacing: 2px;
+      color: rgba(255,255,255,0.2);
+    }
+    .page-nav a .nav-name {
+      font-size: 10px;
+      letter-spacing: 1px;
+      color: rgba(255,255,255,0.4);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .page-nav a:hover .nav-name {
+      color: rgba(255,255,255,0.7);
+    }
   `;
   document.head.appendChild(visualStyle);
 
+  // Enhance prev/next navigation with thumbnails
+  if (!document.querySelector('.grid')) {
+    document.querySelectorAll('.page-nav a').forEach(link => {
+      const href = link.getAttribute('href');
+      const isLeft = link === link.parentElement.firstElementChild;
+      const name = href.replace('.html', '').replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
+      const arrowHtml = link.querySelector('.nav-arrow')?.outerHTML || '';
+
+      // Create thumbnail iframe (loads the actual animation as a tiny preview)
+      link.innerHTML = isLeft
+        ? `<div class="nav-thumb"><iframe src="${href}" loading="lazy" tabindex="-1"></iframe></div>
+           <div class="nav-label"><span class="nav-dir">${arrowHtml} Previous</span><span class="nav-name">${name}</span></div>`
+        : `<div class="nav-label"><span class="nav-dir">Next ${arrowHtml}</span><span class="nav-name">${name}</span></div>
+           <div class="nav-thumb"><iframe src="${href}" loading="lazy" tabindex="-1"></iframe></div>`;
+    });
+  }
+
   // Add vignette overlay (doesn't affect canvas rendering or interactions)
   if (!document.querySelector('.grid')) { // only on animation pages, not gallery
     const vignette = document.createElement('div');