EPIC: The Musical Timeline

Seven design directions for an interactive timeline. Pick one, or mix several. Sample content: placeholder lyrics and unverified details, for comparing designs only.

• 01

  Editorial scroll

  A clean horizontal line in a parchment-and-serif editorial style, with motifs as thin coloured threads underneath.

  Try this: Pan sideways, notice gap length tracking in-story time, and open a song.

• 02

  Vertical story

  The voyage scrolls downward; songs reveal one at a time beside a sticky detail panel.

  Try this: Scroll and watch the sticky detail panel update.

• 03

  Transit map

  Each motif is a coloured metro line and each song a station; shared stations are interchanges.

  Try this: Follow a line between stations, find an interchange, and check the legend.

• 04

  Greek frieze

  The timeline as an unrolled black-figure vase frieze, panned sideways.

  Try this: Pan the frieze and open a song panel.

• 05

  Score / waveform

  The line is a music staff or waveform; song parts are segments and motifs are recurring marks.

  Try this: Look at song parts as segments and follow motif marks as they recur.

• 06

  Constellation (3D)

  Songs are stars along a path through space, joined by motif constellation lines (three.js).

  Try this: Fly the camera through, hover a star, and open a song.

• 07

  Sea voyage (3D)

  A ship crosses a 3D sea past saga islands while the camera follows the route (three.js).

  Try this: Watch the ship sail the route, spot the saga islands, and open a song.

• Round 2: sea charts

  Ways to make the sea chart as easy to browse as the editorial scroll and transit map.

• 08

  Sea chart + log line

  A navigator's chart for place, with a synced editorial log line beneath it for time; motifs as coloured sea routes.

  Try this: Pick a motif, scrub the log line, and watch the chart follow.

• 09

  Schematic sea chart

  The voyage straightened into a transit-style diagram laid over a faint chart; motif lines run alongside the ship's course.

  Try this: Follow a motif line from port to port and open one.

• 10

  Unrolling chart

  An editorial horizontal scroll whose ground is a long chart unrolling as you pan; motif threads trail beneath the route.

  Try this: Pan sideways and watch the ship and coastline move with you.

• 11

  Atlas with insets

  An overview chart of the whole sea; each saga island opens an inset chart with its songs as ports.

  Try this: Open an island's inset, then a song, then zoom back out.

• 12

  Vellum atlas

  The atlas overview and island plates of 11, drawn in the vellum portolan style of 10.

  Try this: Open Cyclops' Island, pick a theme, and switch the plate's motif style (A/B/C).

• 13

  Curtain call

  The frieze curtain that carries you from the 2D story into the 3D sea and down into a landing.

  Try this: Press Play, or step through: frieze, sea, Cyclops' Island, frieze, cave. Switch the look (1/2/3).

• 14

  Voyage with side panel

  The curtain-call voyage with stylised models and a side panel that stays open: about, paths, lyrics, fan works.

  Try this: Play the voyage and watch the panel follow; open Lyrics and Fan works; switch the look (2/3).

• 15

  Voyage, look 2

  14 in look 2, with the frieze, panel and world tied together, and the motif paths out in the open.

  Try this: Step through the voyage and switch where the paths live (A strip, B in the sea, C timeline).

• 16

  Voyage, readable

  15 with readable type, listening folded into the lyrics, and all three motif paths working together.

  Try this: Press play in the panel header, follow the lyrics, collapse the timeline, and turn on threads on the sea.

• 17

  Voyage with real content

  16 with the real songs, line-by-line synced lyrics and the actual Odyssey passage (needs the content folder).

  Try this: Press play on Polyphemus, watch the lyrics follow the song, then open the Odyssey passage.