Кейс 08 / 17 · Сайт · 2026

Звук века

Интерактивный лонгрид об истории звукозаписи: сто лет музыки (1920–2020-е) на одной горизонтальной ленте — эпохи, жанры и ключевые записи с прямыми ссылками на Spotify.

https://music.lkxa.ru

  • Время разработки: 12 дней
  • Экранов на ленте: 13
  • Карточек жанров: 31
  • Зависимостей: 0

Задача

История популярной музыки обычно подаётся как стена текста или очередной список «100 лучших альбомов». Тяжело почувствовать, как десятилетие за десятилетием менялись носитель, технология записи и само звучание, и невозможно тут же послушать то, о чём читаешь.

Решение

Одностраничный сайт-«плёнка»: горизонтальная scroll-snap лента из 13 экранов (вступление + 11 десятилетий + мемориальный слайд), каждый со своей палитрой, шрифтом и ритмом. Весь контент — данные в одном JS-объекте; рендер, навигация и взаимодействие написаны на чистом JavaScript без фреймворка и без сборки. Записи ведут напрямую на конкретный трек или альбом в Spotify, а при наведении фон панели плавно перекрашивается в цвета обложки релиза.

Ключевое

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

Что сделано

  • Горизонтальная scroll-snap лента с управлением колесом мыши, клавиатурой, свайпом и доком-скраббером
  • 13 тематических экранов: у каждой эпохи — большое контурное число, носитель/формат/сцена, жанры, ключевые записи и хронология десятилетия
  • 46 записей с прямыми ссылками на трек или альбом в Spotify (проверены вручную)
  • Подсветка фона цветами обложки релиза при наведении — плавная интерполяция цвета через CSS @property
  • Кликабельные жанры → выдвижная карточка-справка (годы, место рождения, суть, ключевые артисты) в палитре и шрифте своей эпохи; 31 жанр
  • Пер-эпохная дизайн-система на CSS-переменных (--accent, --ink, --paper), color-mix и собственной типографике для каждого десятилетия
  • Титульный экран с живым оглавлением-навигацией по всей ленте
  • Мемориальный слайд (Долли Партон) в контрастной светлой стилистике — единственный светлый экран за сто лет
  • Deep-links: #N — переход на нужный экран, ?open=ЖАНР — открытие карточки жанра
  • Поддержка prefers-reduced-motion, адаптив вплоть до мобильных, доступность (ARIA, управление с клавиатуры, видимый фокус)
  • Ноль зависимостей: index.html + styles.css + script.js, деплой статикой на nginx

Этапы

  1. Концепция и данные (1 день) — Формат «горизонтальной плёнки», структура данных по десятилетиям, подбор жанров и ключевых записей
  2. Вёрстка и типографика (3 дня) — Дизайн-система на CSS-переменных, пер-эпохные палитры и шрифты, контурные числа, док-навигация
  3. Интерактив (3 дня) — Scroll-snap лента, колесо/клавиатура, карточки жанров, подсветка фона обложкой через @property
  4. Контент и Spotify (3 дня) — 46 записей, поиск и сверка прямых ссылок на треки и альбомы, тексты по жанрам и хронологии
  5. Мемориальный слайд и полировка (2 дня) — Слайд памяти Долли Партон в светлой теме, deep-links, адаптив, reduced-motion, конфиг nginx

Следующий проект: MXVI