Концепт сайта · 2026
Сергей Лазарев: сайт артиста
Интерактивный сайт артиста в эстетике концертной сцены: крупная типографика, свет, живой портрет и переход от первого впечатления к афише и музыке.
Задача
Что нужно
было решить
Соединить выразительный первый экран с удобными сценариями: найти концерт, перейти к билетам, послушать релиз, посмотреть видео и найти контакты.
Моя работа
От идеи
до реализации
Реализация интерфейса на Next.js, React и TypeScript, адаптивной композиции, WebGL-портрета, GSAP-анимаций, афиши, фильтров, медиаразделов и страницы тура.
Возможности
Что есть в проекте
Основные сценарии и функции, которые можно увидеть в интерфейсе.
Живой первый экран
Имя артиста, сценическое освещение и портрет с WebGL-маской реагируют на движение курсора.
Афиша с фильтрами
Расписание концертов, поиск подходящего города и даты, ссылки на билетные площадки.
Страница тура
Отдельный раздел «Шоумен» с фотографиями шоу, видео и расписанием.
Музыка и видео
Релизы, ссылки на прослушивание, видеоматериалы и контактные разделы.
Техническая основа
Стек и его роль
Технологии выбираются под данные, интерфейс и способ работы продукта.
- Next.js · React · TypeScript
- Страницы / и /tour, компоненты сайта и типизированное состояние интерфейса.
- WebGL
- Текучая маска портрета, реакция изображения на курсор и сценическая атмосфера.
- GSAP · ScrollTrigger
- Сценическое появление контента, переходы и анимация секций при прокрутке.
- Radix UI · CSS · Docker
- Диалоговые окна, адаптивные стили и контейнерная сборка для сервера.
Реализация
Как это
устроено
- 01
Главный экран собран как сценическая композиция: типографика, свет и портрет работают вместе, сохраняя читаемость навигации.
- 02
WebGL-маска открывает альтернативный портрет по движению мыши; анимации учитывают reduced motion и состояние открытых окон.
- 03
Афиша и фильтры переиспользуются на главной и странице тура вместо независимых копий расписания.
- 04
Меню, фото- и видеопросмотр реализованы как доступные диалоговые окна; внешние музыкальные и билетные ссылки остаются обычными ссылками.
Результат
Что получилось
Опубликован интерактивный концепт с главной страницей, афишей, медиаразделами и страницей тура. Его можно проверить вживую прямо в кейсе.