Epic-The-Musical-Timeline/src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>EPIC: The Musical Timeline — design mockups</title>
  <link rel="stylesheet" href="./index.css" />
  <link rel="stylesheet" href="./shared/credits.css" />
</head>
<body>
  <main>
    <h1>EPIC: The Musical Timeline</h1>
    <p class="lede">Seven design directions for an interactive timeline. Pick one, or mix several. Sample content: placeholder lyrics and unverified details, for comparing designs only.</p>
    <ul class="cards">
      <li class="card"><a href="/mockups/01-editorial/"><span class="card__num">01</span><h2>Editorial scroll</h2><p>A clean horizontal line in a parchment-and-serif editorial style, with motifs as thin coloured threads underneath.</p><p class="card__try">Try this: Pan sideways, notice gap length tracking in-story time, and open a song.</p></a></li>
      <li class="card"><a href="/mockups/02-vertical-story/"><span class="card__num">02</span><h2>Vertical story</h2><p>The voyage scrolls downward; songs reveal one at a time beside a sticky detail panel.</p><p class="card__try">Try this: Scroll and watch the sticky detail panel update.</p></a></li>
      <li class="card"><a href="/mockups/03-transit-map/"><span class="card__num">03</span><h2>Transit map</h2><p>Each motif is a coloured metro line and each song a station; shared stations are interchanges.</p><p class="card__try">Try this: Follow a line between stations, find an interchange, and check the legend.</p></a></li>
      <li class="card"><a href="/mockups/04-greek-frieze/"><span class="card__num">04</span><h2>Greek frieze</h2><p>The timeline as an unrolled black-figure vase frieze, panned sideways.</p><p class="card__try">Try this: Pan the frieze and open a song panel.</p></a></li>
      <li class="card"><a href="/mockups/05-score/"><span class="card__num">05</span><h2>Score / waveform</h2><p>The line is a music staff or waveform; song parts are segments and motifs are recurring marks.</p><p class="card__try">Try this: Look at song parts as segments and follow motif marks as they recur.</p></a></li>
      <li class="card"><a href="/mockups/06-constellation/"><span class="card__num">06</span><h2>Constellation (3D)</h2><p>Songs are stars along a path through space, joined by motif constellation lines (three.js).</p><p class="card__try">Try this: Fly the camera through, hover a star, and open a song.</p></a></li>
      <li class="card"><a href="/mockups/07-sea-voyage/"><span class="card__num">07</span><h2>Sea voyage (3D)</h2><p>A ship crosses a 3D sea past saga islands while the camera follows the route (three.js).</p><p class="card__try">Try this: Watch the ship sail the route, spot the saga islands, and open a song.</p></a></li>
      <li class="card card--round"><h2>Round 2: sea charts</h2><p>Ways to make the sea chart as easy to browse as the editorial scroll and transit map.</p></li>
      <li class="card"><a href="/mockups/08-chart-logline/"><span class="card__num">08</span><h2>Sea chart + log line</h2><p>A navigator's chart for place, with a synced editorial log line beneath it for time; motifs as coloured sea routes.</p><p class="card__try">Try this: Pick a motif, scrub the log line, and watch the chart follow.</p></a></li>
      <li class="card"><a href="/mockups/09-chart-transit/"><span class="card__num">09</span><h2>Schematic sea chart</h2><p>The voyage straightened into a transit-style diagram laid over a faint chart; motif lines run alongside the ship's course.</p><p class="card__try">Try this: Follow a motif line from port to port and open one.</p></a></li>
      <li class="card"><a href="/mockups/10-chart-scroll/"><span class="card__num">10</span><h2>Unrolling chart</h2><p>An editorial horizontal scroll whose ground is a long chart unrolling as you pan; motif threads trail beneath the route.</p><p class="card__try">Try this: Pan sideways and watch the ship and coastline move with you.</p></a></li>
      <li class="card"><a href="/mockups/11-chart-atlas/"><span class="card__num">11</span><h2>Atlas with insets</h2><p>An overview chart of the whole sea; each saga island opens an inset chart with its songs as ports.</p><p class="card__try">Try this: Open an island's inset, then a song, then zoom back out.</p></a></li>
      <li class="card"><a href="/mockups/12-vellum-atlas/"><span class="card__num">12</span><h2>Vellum atlas</h2><p>The atlas overview and island plates of 11, drawn in the vellum portolan style of 10.</p><p class="card__try">Try this: Open Cyclops' Island, pick a theme, and switch the plate's motif style (A/B/C).</p></a></li>
      <li class="card"><a href="/mockups/13-curtain-call/"><span class="card__num">13</span><h2>Curtain call</h2><p>The frieze curtain that carries you from the 2D story into the 3D sea and down into a landing.</p><p class="card__try">Try this: Press Play, or step through: frieze, sea, Cyclops' Island, frieze, cave. Switch the look (1/2/3).</p></a></li>
      <li class="card"><a href="/mockups/14-voyage-panel/"><span class="card__num">14</span><h2>Voyage with side panel</h2><p>The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.</p><p class="card__try">Try this: Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3).</p></a></li>
      <li class="card"><a href="/mockups/15-voyage-look2/"><span class="card__num">15</span><h2>Voyage, look 2</h2><p>14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.</p><p class="card__try">Try this: Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline).</p></a></li>
      <li class="card"><a href="/mockups/16-voyage-readable/"><span class="card__num">16</span><h2>Voyage, readable</h2><p>15 with readable type, listening folded into the lyrics, and all three motif paths working together.</p><p class="card__try">Try this: Press play in the panel header, follow the lyrics, collapse the timeline, and turn on threads on the sea.</p></a></li>
    </ul>
  </main>
  <footer data-fan-credits></footer>
  <script type="module" src="./index.ts"></script>
</body>
</html>