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.