Case 04 / 04[DJ] — [2026]

DJ ZEZE.

Клиент: DJ ZEZE — диджей из Праги, резидент Duplex Prague
Роль: Дизайн и разработка
Стек: Vanilla JS · Web Audio API · Canvas / WebGL · Blender · Node.js static build
Год: 2026
Статус: Запущенsoundbyzeze.com

Сайт с бронированием для пражского диджея DJ ZEZE: 3D-пульт, который поворачивается при скролле и работает как настоящий плеер миксов — фейдеры, эквалайзер и эффекты на компьютере и на телефоне. Три языка, заявки через Telegram и email.

Открыть живое демо Оригинальный сайт

DJ ZEZE — 3D-hero — пушистый логотип, колонки и DJ-пульт поверх зацикленного видео из клуба — 3D-hero — пушистый логотип, колонки и DJ-пульт поверх зацикленного видео из клуба

Обзор

ZEZE играет open format — хип-хоп, R&B, трэп, baile funk, дэнсхолл, афро, трайбл-хаус — и резидент клуба Duplex Prague. У сайта одна задача: продать её с первого экрана и приводить заявки на клубы, свадьбы, корпоративы, частные вечеринки и фестивали. Цен на сайте нет — условия обсуждаются лично.

Я сделал проект целиком: концепция и дизайн, 3D-сцены, отрендеренные в Blender, свой аудиодвижок, три языка, юридические страницы под Чехию, безопасность, SEO и запуск. Без фреймворков — чистый JavaScript и статическая сборка на Node.js с готовой HTML-страницей для каждого языка.

На первом экране никаких всплывающих окон: сайт не использует cookies и аналитику, поэтому cookie-баннер не нужен. За неделю после запуска Google проиндексировал 7 страниц, по запросу «soundbyzeze» сайт стоит вторым сразу после Instagram диджея, а Lighthouse показывает SEO 100, Best Practices 100, Accessibility 97.

Посмотреть вживую/demos/zeze/

В демо — настоящий пульт и первые пять минут каждого из четырёх миксов. Полные сеты играют на soundbyzeze.com.

Фирменная анимация

Как это устроено.

Пульт здесь — не картинка пульта. Скролл разворачивает камеру из фронтального вида в вид сверху, а дальше деки, фейдеры и эффекты по-настоящему играют миксы диджея.

01
80 отрендеренных кадров
Разворот камеры — секвенция из 80 кадров, отрендеренных в Blender и привязанных к скроллу. Мембраны и подсветка колонок — отдельные проходы рендера поверх.
02
Свой аудиодвижок
Миксы нарезаны на 60-секундные куски AAC и склеиваются с точностью до сэмпла, без щелчков. Весь звук идёт через микшер — в любом браузере, включая iPhone.
03
Раскладка как у настоящего
Кнопки — по спецификации реального контроллера (DDJ-REV5): фейдеры, кроссфейдер, эквалайзер, фильтр, эхо, реверб, флэнжер, hot cues, лупы, роллы, censor, скретч, sync, SHIFT.
04
Колонки в такт
Мембраны подсвечиваются и качаются в ритм, а колонку можно «потрясти» тапом. Шерсть логотипа и дым — свои шейдеры на Canvas/WebGL.

DJ ZEZE — После разворота — пульт сверху; справа — первый экран на телефоне — После разворота — пульт сверху; справа — первый экран на телефоне

DJ ZEZE — mobile — После разворота — пульт сверху; справа — первый экран на телефоне

Посмотреть вживую/demos/zeze/

Возможности06

01
Пульт на телефоне
Приближение по секциям (дека A · микшер · дека B), попадание пальцем с допуском и мультитач — два фейдера двумя пальцами сразу.
02
iPhone, даже в беззвучном
Обычный <audio> на iOS играет мимо Web Audio, и фейдеры там не работали — свой движок это решил. Web Audio молчит в бесшумном режиме — обход заставляет его играть.
03
Лёгкая загрузка
Аудио начинает грузиться при первом движении мыши или касании, а не вместе со страницей — минус 3,8 МБ на каждом заходе. Логотип не прыгает: CLS 0,004 при норме до 0,1.
04
Три языка как надо
EN, RU и CS — отдельные статические страницы с текстом прямо в разметке, sitemap с hreflang, llms.txt и JSON-LD. Проверено на 320–1920 px: составные слова не рвутся, короткие предлоги не висят в конце строки — правило чешской типографики.
05
Атаковать нечего
Строгий CSP, HSTS и защита от встраивания. Ни бэкенда, ни форм, ни секретов. Реквизиты ИП в подвале по чешскому закону и уведомление GDPR на трёх языках.
06
Поиск с первого дня
Google Search Console, Bing Webmaster Tools и IndexNow (Bing, Seznam, Яндекс) подключены сразу при запуске.