Polish share page hierarchy and styling.

Align /play colors with main (green accents), simplify copy and metadata, reduce timestamp prominence, and improve title cleaning to avoid filename-like artifacts with optional artist subline.

play.html

@@ -4,11 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <title>Check out this Gameboy tune — MOTIF</title>
-    <meta name="description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
+    <meta name="description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
 
     <!-- OpenGraph / Social Media Preview -->
     <meta property="og:title" content="Check out this Gameboy tune" />
-    <meta property="og:description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
+    <meta property="og:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
     <meta property="og:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
     <meta property="og:image:width" content="1200" />
     <meta property="og:image:height" content="630" />
@@ -18,7 +18,7 @@
     <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Check out this Gameboy tune" />
-    <meta name="twitter:description" content="Someone shared a song with you. Tap play to run it through the Wario synthesis engine — then generate your own." />
+    <meta name="twitter:description" content="Someone shared a song with you. Press play to hear it reimagined as classic game-console music — then generate your own." />
     <meta name="twitter:image" content="https://motif-self.vercel.app/chiptune_blog_piece_1000x.webp" />
     <style>
       :root {
@@ -140,22 +140,22 @@
       }
 
       button.primary {
-        background: var(--color-accent-secondary);
+        background: var(--color-accent-primary);
         color: #000;
-        border-color: rgba(255, 170, 68, 0.6);
+        border-color: rgba(0, 255, 136, 0.55);
         font-weight: 700;
       }
 
       button.primary:hover:not(:disabled) {
-        box-shadow: var(--glow-secondary), var(--shadow-md);
+        box-shadow: var(--glow-primary), var(--shadow-md);
       }
 
       .motif-stage {
         background: var(--color-surface-elevated);
         padding: calc(var(--spacing-unit) * 3);
         border-radius: var(--radius);
-        border: 1px solid rgba(255, 170, 68, 0.2);
+        border: 1px solid rgba(255, 255, 255, 0.08);
-        box-shadow: var(--shadow-lg), var(--glow-secondary);
+        box-shadow: var(--shadow-lg);
       }
 
       .motif-grid {
@@ -222,7 +222,7 @@
       .progress-container {
         margin-top: 8px;
         padding-top: 16px;
-        border-top: 1px solid rgba(255, 170, 68, 0.15);
+        border-top: 1px solid rgba(255, 255, 255, 0.08);
         display: none;
       }
 
@@ -231,7 +231,11 @@
         justify-content: space-between;
         margin-bottom: 8px;
         font-size: 0.85em;
-        color: #8f8f8f;
+        color: rgba(255,255,255,0.22);
+        transition: color 120ms ease;
+      }
+      .progress-time.active {
+        color: rgba(255,255,255,0.55);
       }
 
       .progress-bar-wrapper {
@@ -267,9 +271,9 @@
         width: 20px;
         height: 20px;
         border-radius: 50%;
-        background: var(--color-accent-secondary);
+        background: var(--color-accent-primary);
         cursor: pointer;
-        box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
+        box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm);
         margin-top: -7px;
         transition: transform 100ms ease;
       }
@@ -288,10 +292,10 @@
         width: 20px;
         height: 20px;
         border-radius: 50%;
-        background: var(--color-accent-secondary);
+        background: var(--color-accent-primary);
         cursor: pointer;
         border: none;
-        box-shadow: 0 0 8px rgba(255, 170, 68, 0.6), var(--shadow-sm);
+        box-shadow: 0 0 10px rgba(0, 255, 136, 0.28), var(--shadow-sm);
       }
 
       .progress-fill {
@@ -300,41 +304,59 @@
         top: 50%;
         transform: translateY(-50%);
         height: 6px;
-        background: linear-gradient(90deg, var(--color-accent-secondary), rgba(255, 170, 68, 0.5));
+        background: linear-gradient(90deg, rgba(0,255,136,0.95), rgba(0,255,136,0.45));
         border-radius: 3px;
         pointer-events: none;
         z-index: 1;
         width: 0%;
         transition: width 0.1s linear;
       }
+
+      .meta-block {
+        margin-top: 8px;
+        font-size: 13px;
+        color: rgba(255,255,255,0.58);
+        line-height: 1.45;
+        max-width: 72ch;
+      }
+
+      .volume-row {
+        margin-top: 14px;
+        opacity: 0.6;
+      }
+      .volume-row label {
+        font-size: 12px;
+        color: rgba(255,255,255,0.5);
+      }
     </style>
   </head>
   <body>
     <div class="container">
-      <div class="motif-stage" style="border-color: rgba(255, 255, 255, 0.08); box-shadow: var(--shadow-lg);">
+      <div class="motif-stage">
         <div class="motif-grid" style="gap: 14px;">
           <!-- 1. Source Song Title -->
           <h1 id="songTitle" style="margin:0; font-size: 28px; line-height: 1.15; font-weight: 800; color: var(--color-text); letter-spacing: 0.01em;">
             Loading…
           </h1>
+          <div id="songArtist" style="display:none; margin-top: -4px; font-size: 14px; color: rgba(255,255,255,0.62);"></div>
 
           <!-- 2. Transformation Description -->
           <p id="transformLine" style="margin:0; color: rgba(255,255,255,0.72); font-size: 14px;">
-            Re-synthesised as NES-era chiptune using Motif
+            Reimagined as classic game-console music
           </p>
 
           <!-- 3. Single Play/Pause Control -->
-          <div style="display:flex; justify-content:center; margin-top: 6px;">
+          <div style="display:flex; justify-content:center; margin-top: 16px; margin-bottom: 16px;">
-            <button id="playToggleBtn" class="primary" disabled style="min-width: 220px; padding: 14px 18px; font-size: 15px;">
+            <button id="playToggleBtn" class="primary" disabled style="min-width: 240px; padding: 14px 18px; font-size: 15px;">
               Play
             </button>
           </div>
 
           <!-- 4. Progress Bar -->
-          <div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08);">
+          <div class="progress-container" id="playProgressContainer" style="display:block; margin-top: 0; padding-top: 12px;">
-            <div class="progress-time">
+            <div class="progress-time" id="playTimeRow">
               <span id="playCurrentTime">0:00</span>
-              <span id="playDuration">0:00</span>
+              <span id="playDuration"></span>
             </div>
             <div class="progress-bar-wrapper" style="padding: 10px 0;">
               <input id="playProgressBar" class="progress-bar" type="range" min="0" max="100" value="0" step="0.1" />
@@ -342,25 +364,20 @@
             </div>
           </div>
 
-          <!-- 5. Status Text Replacement (static, non-interactive) -->
+          <!-- 5/6. Metadata (quiet block) -->
-          <div style="margin-top: 2px; font-size: 13px; color: rgba(255,255,255,0.72);">
+          <div class="meta-block" id="metaBlock">
-            Procedural playback · No samples · Deterministic
+            Procedural playback from MIDI structure.<br />
-          </div>
+            Rendered using Motif’s Wario game-console engine.
-
-          <!-- 6. Minimal metadata line (secondary, low contrast) -->
-          <div style="font-size: 12px; color: rgba(255,255,255,0.52); display:flex; gap: 14px; flex-wrap: wrap;">
-            <span>Engine: Wario (Game Boy / NES)</span>
-            <span>Source: MIDI structure</span>
           </div>
 
           <!-- Optional volume (acceptable) -->
-          <div class="volume-control" style="min-width: 0; margin-top: 4px; opacity: 0.85;">
+          <div class="volume-control volume-row" style="min-width: 0;">
             <label for="volume" style="min-width: auto;">Volume</label>
             <input id="volume" type="range" min="0" max="1" step="0.01" value="0.7" />
           </div>
 
           <!-- 7. Primary CTA (single) -->
-          <div style="margin-top: 10px;">
+          <div style="margin-top: 18px;">
             <a id="generateOwn" href="/" style="display:inline-block; color: rgba(0,255,136,0.92); text-decoration:none; font-weight: 650;">
               Generate your own →
             </a>

src/play.ts

@@ -55,32 +55,78 @@ function cleanLooseTitle(raw: string): string {
     .trim();
 }
 
-function formatDisplayTitle(raw: string): { display: string; prefill: string } {
+function stripJunkTokens(s: string): string {
+  const tokens = (s || '').split(/\s+/g).filter(Boolean);
+  const drop = new Set(['MID', 'MIDI', 'K']);
+  const out: string[] = [];
+  for (const t of tokens) {
+    const up = t.toUpperCase();
+    if (drop.has(up)) continue;
+    // drop single-letter suffix tokens (common filename artefacts)
+    if (/^[A-Z]$/i.test(t)) continue;
+    out.push(t);
+  }
+  return out.join(' ');
+}
+
+function scoreTitleLike(part: string): number {
+  const words = (part || '').split(/\s+/g).filter(Boolean);
+  let score = 0;
+  for (const w of words) {
+    const isCaps = w.length >= 3 && w === w.toUpperCase() && /[A-Z]/.test(w);
+    const isWordy = w.length >= 3;
+    if (isWordy && !isCaps) score += 2;
+    if (isCaps) score -= 2;
+    if (w.length === 1) score -= 1;
+  }
+  score += Math.min(6, words.length);
+  return score;
+}
+
+function splitOnSeparators(raw: string): string[] {
+  const normalized = (raw || '')
+    .replace(/[–—]/g, '-') // normalize en/em-dash to hyphen
+    .replace(/\s*-\s*/g, ' - ');
+  return normalized
+    .split(/\s+-\s+/g)
+    .map((p) => p.trim())
+    .filter(Boolean);
+}
+
+function pickShareTitle(raw: string): { title: string; artist: string | null; prefill: string } {
   const cleaned = cleanLooseTitle(raw);
-  // If we have common separators "Artist - Title" or "Artist — Title", invert to "Title — Artist"
+  const parts = splitOnSeparators(cleaned);
-  const sepMatch = cleaned.match(/^(.+?)\s*(?:—|-)\s*(.+)$/);
+
-  if (sepMatch) {
+  // Default: use best-looking part and avoid guessing artist unless very confident.
-    const left = titleCase(sepMatch[1].trim());
+  let chosen = cleaned;
-    const right = titleCase(sepMatch[2].trim());
+  let artist: string | null = null;
-    // Heuristic: if left looks like an artist, invert (most common file naming)
+
-    const display = `${right} — ${left}`;
+  if (parts.length >= 2) {
-    return { display, prefill: `${right} ${left}`.trim() };
+    const a = parts[0];
+    const b = parts.slice(1).join(' - ');
+    const scoreA = scoreTitleLike(a);
+    const scoreB = scoreTitleLike(b);
+    chosen = scoreB > scoreA ? b : a;
+    if (scoreA === scoreB) chosen = b; // default to "Artist - Title" pattern
+
+    // Only show artist if the other side looks confidently like a human name/titlecase.
+    const other = chosen === a ? b : a;
+    const otherTC = titleCase(stripJunkTokens(other));
+    const chosenTC = titleCase(stripJunkTokens(chosen));
+    const looksLikeName = otherTC.split(/\s+/).length >= 2 && otherTC !== otherTC.toUpperCase();
+    if (looksLikeName && chosenTC && chosenTC.length >= 3) {
+      // Only accept if other isn't screaming filename (no digits, no extensions)
+      if (!/[0-9]/.test(otherTC)) artist = otherTC;
+    }
   }
 
-  // Dot-prefix heuristic: "ARTIST.Title" becomes "Title — Artist"
+  const title = titleCase(stripJunkTokens(chosen)).trim();
-  const dotPrefix = raw.match(/^([A-Za-z]{2,20})[._\s]+(.+)$/);
+  return { title: title || 'Shared Motif', artist, prefill: title || cleaned || 'Shared Motif' };
-  if (dotPrefix && dotPrefix[1] && dotPrefix[2]) {
-    const artist = titleCase(cleanLooseTitle(dotPrefix[1]));
-    const title = titleCase(cleanLooseTitle(dotPrefix[2]));
-    if (artist && title) return { display: `${title} — ${artist}`, prefill: `${title} ${artist}`.trim() };
-  }
-
-  const t = titleCase(cleaned || 'Shared Motif');
-  return { display: t, prefill: t };
 }
 
 async function main(): Promise<void> {
   const titleEl = qs('songTitle');
+  const artistEl = qs('songArtist');
   const playBtn = qs('playToggleBtn') as HTMLButtonElement;
   const volumeEl = qs('volume') as HTMLInputElement;
   const generateOwn = qs('generateOwn') as HTMLAnchorElement;
@@ -89,14 +135,21 @@ async function main(): Promise<void> {
   const progressFill = qs('playProgressFill') as HTMLElement;
   const currentTimeEl = qs('playCurrentTime') as HTMLElement;
   const durationEl = qs('playDuration') as HTMLElement;
+  const timeRow = qs('playTimeRow') as HTMLElement;
 
   const { midiUrl: u, title } = buildMidiUrlFromParams();
 
-  const formatted = formatDisplayTitle(title);
+  const picked = pickShareTitle(title);
-  titleEl.textContent = formatted.display;
+  titleEl.textContent = picked.title;
+  if (picked.artist) {
+    artistEl.textContent = picked.artist;
+    (artistEl as HTMLElement).style.display = 'block';
+  } else {
+    (artistEl as HTMLElement).style.display = 'none';
+  }
 
   // Set CTA back to home, prefilling search if we have a title.
-  generateOwn.href = formatted.prefill ? `/?song=${encodeURIComponent(formatted.prefill)}` : '/';
+  generateOwn.href = picked.prefill ? `/?song=${encodeURIComponent(picked.prefill)}` : '/';
 
   if (!u) {
     playBtn.disabled = true;
@@ -113,6 +166,7 @@ async function main(): Promise<void> {
   let resumeProgress = 0;
   let playStartMs: number | null = null; // performance.now() at audio time=0 (minus offset)
   let playOffsetSec = 0; // last known playback position in seconds
+  let timeRowTimeout: number | null = null;
 
   try {
     const buf = await midiService.fetchMIDI(u);
@@ -163,6 +217,12 @@ async function main(): Promise<void> {
     }
   }
 
+  function showTimeRow(): void {
+    timeRow.classList.add('active');
+    if (timeRowTimeout) window.clearTimeout(timeRowTimeout);
+    timeRowTimeout = window.setTimeout(() => timeRow.classList.remove('active'), 900);
+  }
+
   function startProgressUpdates(): void {
     stopProgressUpdates();
     progressInterval = window.setInterval(updateProgress, 100);
@@ -181,6 +241,7 @@ async function main(): Promise<void> {
   });
 
   const seekHandler = (e: Event) => {
+    showTimeRow();
     const p = Number.parseFloat((e.target as HTMLInputElement).value) / 100;
     if (!isGenerated) {
       resumeProgress = p;
@@ -208,6 +269,7 @@ async function main(): Promise<void> {
 
     // Pause (implemented as stop + remembered position)
     if (isPlaying) {
+      showTimeRow();
       const current = getLocalCurrentTime();
       resumeProgress = durationSec > 0 ? current / durationSec : 0;
       playOffsetSec = current;
@@ -234,6 +296,7 @@ async function main(): Promise<void> {
         isGenerated = true;
         // If user scrubbed before play, carry that into seconds now that we know duration.
         playOffsetSec = resumeProgress * durationSec;
+        showTimeRow();
       }
 
       setUiPlaying(true);
@@ -246,6 +309,7 @@ async function main(): Promise<void> {
       // Local progress tracking
       playStartMs = performance.now() - playOffsetSec * 1000;
       startProgressUpdates();
+      showTimeRow();
     } catch (e) {
       setUiPlaying(false);
       playStartMs = null;