Enhance carousel functionality and styling. Updated ui.js to implement a coverflow layout for cassette cards, allowing for improved visual presentation and interaction. Added keyboard navigation for carousel controls and refined button states in style.css for better user experience. Adjusted card animations and positioning for a more dynamic interface.

frontend/style.css

@@ -868,6 +868,8 @@ body {
 
 .caro-btn {
   flex: none;
+  position: relative;
+  z-index: 2;
   width: 40px;
   height: 40px;
   border-radius: 50%;
@@ -887,25 +889,29 @@ body {
   background: rgba(255, 255, 255, 0.38);
 }
 
-#carousel {
-  flex: 1;
-  display: flex;
-  gap: 16px;
-  overflow-x: auto;
-  scroll-snap-type: x mandatory;
-  padding: 14px 6px 20px;
-  scrollbar-width: none;
+.caro-btn:disabled {
+  opacity: 0.32;
+  cursor: default;
 }
 
-#carousel::-webkit-scrollbar {
-  display: none;
+.caro-btn:disabled:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+#carousel {
+  position: relative;
+  flex: 1;
+  height: 232px;
+  perspective: 1200px;
+  overflow: hidden;
 }
 
 .cassette-card {
-  flex: none;
-  width: 196px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 184px;
   box-sizing: border-box;
-  scroll-snap-align: center;
   cursor: pointer;
   border: none;
   padding: 0 0 4px;
@@ -914,23 +920,29 @@ body {
   border-radius: 14px;
   box-shadow:
     inset 0 2px 6px rgba(255, 255, 255, 0.14),
-    0 8px 22px rgba(15, 40, 90, 0.32);
+    0 10px 24px rgba(15, 40, 90, 0.32);
+  transform-origin: center center;
+  transform: translate(-50%, -50%) scale(0.5); /* pre-layout: centred + small */
+  opacity: 0;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
   transition:
-    transform 0.18s ease,
-    box-shadow 0.18s ease;
-  animation: cassette-out 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+    transform 0.44s cubic-bezier(0.22, 0.61, 0.36, 1),
+    opacity 0.44s ease,
+    box-shadow 0.25s ease,
+    filter 0.2s ease;
+  will-change: transform, opacity;
 }
 
 .cassette-card:hover {
-  transform: translateY(-4px);
+  filter: brightness(1.08);
 }
 
 .cassette-card.selected {
-  transform: translateY(-6px);
   box-shadow:
     0 0 0 3px #ffd84a,
-    inset 0 2px 6px rgba(255, 255, 255, 0.14),
-    0 12px 28px rgba(15, 40, 90, 0.4);
+    inset 0 2px 6px rgba(255, 255, 255, 0.16),
+    0 16px 34px rgba(15, 40, 90, 0.46);
 }
 
 .cassette-card .cassette-label {

frontend/ui.js

@@ -137,26 +137,67 @@ export function initUI({
   // out absolute URLs and the other relative ones
   const tapeKey = (url) => url?.split("/").pop();
 
-  function syncCards() {
+  let cards = []; // card nodes in song order
+  let songsList = []; // songs backing the cards
+  let centerIndex = 0; // which tape sits in the middle (the selected one)
+  const caroPrev = $("caro-prev");
+  const caroNext = $("caro-next");
+
+  // Coverflow geometry, indexed by distance from the centre (capped at 3): the
+  // middle tape is biggest and face-on; neighbours shrink and angle inward;
+  // anything past ±2 is parked offscreen and hidden, so ~5 tapes show at once.
+  const CF_STEP = [0, 150, 268, 360]; // px from centre
+  const CF_SCALE = [1.16, 0.82, 0.64, 0.5];
+  const CF_TILT = [0, 20, 28, 28]; // deg, rotated toward the centre
+  const CF_FADE = [1, 0.9, 0.46, 0]; // opacity
+
+  function layoutCarousel() {
     const playing = !audio.paused;
-    for (const card of carousel.children) {
-      const selected =
-        !!currentSong && tapeKey(card.dataset.url) === tapeKey(currentSong.url);
-      card.classList.toggle("selected", selected);
-      card.classList.toggle("playing", selected && playing);
+    cards.forEach((card, i) => {
+      const offset = i - centerIndex;
+      const d = Math.min(Math.abs(offset), 3);
+      const dir = Math.sign(offset);
+      card.style.transform =
+        `translate(-50%, -50%) translateX(${dir * CF_STEP[d]}px) ` +
+        `scale(${CF_SCALE[d]}) rotateY(${-dir * CF_TILT[d]}deg)`;
+      card.style.opacity = CF_FADE[d];
+      card.style.zIndex = 30 - d;
+      card.style.pointerEvents = d <= 2 ? "auto" : "none";
+      card.setAttribute("aria-hidden", d <= 2 ? "false" : "true");
+      card.classList.toggle("selected", offset === 0);
+      card.classList.toggle("playing", offset === 0 && playing);
+    });
+    caroPrev.disabled = centerIndex <= 0;
+    caroNext.disabled = centerIndex >= cards.length - 1;
+  }
+
+  // older callers just want the selection/playing classes refreshed in place
+  const syncCards = layoutCarousel;
+
+  // Bring tape `index` to the middle. `load` also drops it into the deck and
+  // plays it (an explicit pick); open-time centering passes load:false.
+  function centerOn(index, { load = false } = {}) {
+    if (!cards.length) return;
+    centerIndex = Math.max(0, Math.min(cards.length - 1, index));
+    const song = songsList[centerIndex];
+    if (load && song && tapeKey(song.url) !== tapeKey(currentSong?.url)) {
+      loadCassette(song, SHELL_COLORS[centerIndex % SHELL_COLORS.length]);
+    } else {
+      if (load && audio.paused) audio.play().catch(() => {});
+      layoutCarousel();
     }
   }
 
   function renderCarousel(songs) {
+    songsList = songs;
     carousel.innerHTML = "";
-    songs.forEach((song, i) => {
+    cards = songs.map((song, i) => {
       const shell = SHELL_COLORS[i % SHELL_COLORS.length];
       const card = document.createElement("button");
       card.className = "cassette-card";
       card.dataset.url = song.url;
       card.style.setProperty("--shell1", shell[0]);
       card.style.setProperty("--shell2", shell[1]);
-      card.style.animationDelay = `${Math.min(i * 60, 480)}ms`;
       card.title = song.title;
 
       const label = document.createElement("div");
@@ -172,15 +213,19 @@ export function initUI({
 
       card.append(label, reels);
       card.addEventListener("click", () => {
-        if (tapeKey(currentSong?.url) === tapeKey(song.url)) togglePlay();
+        if (i !== centerIndex) centerOn(i, { load: true });
+        else if (tapeKey(currentSong?.url) === tapeKey(song.url)) togglePlay();
         else loadCassette(song, shell);
       });
       carousel.appendChild(card);
+      return card;
     });
-    syncCards();
-    carousel
-      .querySelector(".selected")
-      ?.scrollIntoView({ inline: "center", block: "nearest" });
+    // open centered on the tape already playing, otherwise the newest one
+    const playingIdx = songs.findIndex(
+      (s) => tapeKey(s.url) === tapeKey(currentSong?.url)
+    );
+    centerIndex = playingIdx >= 0 ? playingIdx : 0;
+    layoutCarousel();
   }
 
   async function openCollection() {
@@ -257,12 +302,8 @@ export function initUI({
   deckProgress.addEventListener("click", seek(deckProgress));
 
   $("collection-close").addEventListener("click", () => onRequestCloseCollection());
-  $("caro-prev").addEventListener("click", () =>
-    carousel.scrollBy({ left: -440, behavior: "smooth" })
-  );
-  $("caro-next").addEventListener("click", () =>
-    carousel.scrollBy({ left: 440, behavior: "smooth" })
-  );
+  caroPrev.addEventListener("click", () => centerOn(centerIndex - 1, { load: true }));
+  caroNext.addEventListener("click", () => centerOn(centerIndex + 1, { load: true }));
 
   // --- modal controls ---------------------------------------------------------
 
@@ -285,6 +326,18 @@ export function initUI({
     }
   });
 
+  // arrow keys flick through the carousel while the collection is open
+  window.addEventListener("keydown", (e) => {
+    if (!collectionOpen) return;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      centerOn(centerIndex - 1, { load: true });
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      centerOn(centerIndex + 1, { load: true });
+    }
+  });
+
   function syncPill() {
     // the corner pill yields to the machine modal and the tape deck
     const modalHidden = modal.classList.contains("hidden");