EPIC: The Musical Timeline
+Seven design directions for an interactive timeline. Pick one, or mix several.
+-
+
- 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.
+