Картотека артистов
Сайт студии о музыкантах новой волны. Одна карточка — один мир: свой цвет, шрифт, раскладка и подача фото. Всё это собирается из одного шаблона.
Идея
Обычно на сайте у всех артистов одинаковые страницы. Нам хотелось, чтобы страница выглядела как сам артист, и при этом не верстать каждую заново.
Тема как данные
Каждый артист — один файл данных. Тема в нём тоже данные: палитра, шрифты, раскладка, цветные или чёрно-белые фото. При сборке тема превращается в CSS-переменные и набор шрифтов, поэтому новая страница появляется, как только добавлен файл.
Картотека
Главная — ящик картотеки на CSS 3D. Начинаешь печатать имя, и карточки перелистываются. Нужная поднимается, переворачивается уже в теме артиста и раскрывается на весь экран, а при возврате падает обратно в ящик.
Звук в цифрах
Дискография приходит из открытого API Deezer: релизы, треки, обложки. Тридцатисекундные превью разбирает наш анализатор на TypeScript: темп, громкость, бас, яркость и форма волны. Из этого собран раздел «Спектр» и звуковая карта, где каждый трек — точка на осях темпа и громкости.
Как карточка становится страницей
Ящик с карточками, толкатель с пружиной и подъёмник. Найденная карточка поднимается и переворачивается: на обороте уже её тема, а прибор рядом читает звук трека.
Экраны
Технически
- 28 артистов и 1 772 статические страницы: артист, релизы и отдельная страница у каждого трека.
- Astro и TypeScript без CMS: артист — это файл данных, тема — CSS-переменные и шрифты.
- Скрипт синхронизации с открытым API Deezer: релизы, треки, лейблы, фиты и обложки.
- Свой FFT на TypeScript: темп по автокорреляции атак, громкость, доля баса, яркость, волна на 96 точек.
- Картотека на CSS 3D с управлением мышью, стрелками и Enter, шелест бумаги на Web Audio по желанию.
Astro · TypeScript · CSS 3D · Deezer API · Web Audio