Case 08 / 17 · Website · 2026

Sound of the Century

An interactive long read on the history of recorded sound: a hundred years of music (1920s–2020s) on a single horizontal strip — eras, genres and key records with direct Spotify links.

https://music.lkxa.ru

  • Development time: 12 days
  • Screens on the strip: 13
  • Genre cards: 31
  • Dependencies: 0

Challenge

The history of popular music is usually served as a wall of text or yet another “100 best albums” list. It’s hard to feel how, decade by decade, the medium, the recording technology and the sound itself changed — and impossible to hear what you’re reading about right away.

Solution

A single-page “film strip” site: a horizontal scroll-snap strip of 13 screens (intro + 11 decades + a memorial slide), each with its own palette, typeface and rhythm. All content is data in one JS object; rendering, navigation and interaction are plain JavaScript with no framework and no build. Records link straight to the exact track or album on Spotify, and on hover the panel background smoothly recolours to the release’s cover art.

Highlights

Vanilla JS + CSS · Zero dependencies · No build step · 13 panels · 46 Spotify links · 31 genre cards

What was built

  • A horizontal scroll-snap strip driven by mouse wheel, keyboard, swipe and a scrubber dock
  • 13 themed screens: every era gets a big outlined numeral, medium/format/scene, genres, key records and a timeline of the decade
  • 46 records with direct links to a track or album on Spotify (checked by hand)
  • Background tinted with the release’s cover colours on hover — smooth colour interpolation via CSS @property
  • Clickable genres → a slide-out reference card (years, birthplace, essence, key artists) in its era’s palette and type; 31 genres
  • A per-era design system on CSS variables (--accent, --ink, --paper), color-mix and bespoke typography for each decade
  • A title screen with a live table of contents that navigates the whole strip
  • A memorial slide (Dolly Parton) in a contrasting light style — the only light screen in a hundred years
  • Deep links: #N jumps to a screen, ?open=GENRE opens a genre card
  • prefers-reduced-motion support, responsive down to mobile, accessibility (ARIA, keyboard control, visible focus)
  • Zero dependencies: index.html + styles.css + script.js, deployed as static files on nginx

Stages

  1. Concept and data (1 day) — The “horizontal film strip” format, a data structure by decade, choosing genres and key records
  2. Layout and typography (3 days) — A design system on CSS variables, per-era palettes and typefaces, outlined numerals, dock navigation
  3. Interaction (3 days) — Scroll-snap strip, wheel/keyboard, genre cards, cover-tinted backgrounds via @property
  4. Content and Spotify (3 days) — 46 records, finding and verifying direct track and album links, genre and timeline copy
  5. Memorial slide and polish (2 days) — A Dolly Parton memorial slide in a light theme, deep links, responsiveness, reduced motion, nginx config

Next project: MXVI