Премиум-сайт для рок-группы AROCKAI
Одностраничный сайт в стилистике западного музыкального лейбла: SVG-анимации, виниловый аудиоплеер, AI-разметка для подсказок Яндекс.Алисы, защита авторских файлов. Показываем, как устроен проект изнутри.
Рок-группа с историей с 2003 года
AROCKAI — российский авторский рок-проект, существующий с 2003 года. Группа делает ставку на собственный материал: от плотных гитарных композиций до камерных лирических баллад. Их музыка — это диалог между энергией и тишиной, и сайт должен был этот диалог поддержать визуально.
На входе у нас был логотип, палитра-референс и чёткое понимание, что это не должен быть «ещё один шаблонный сайт группы». Нужна была витрина в эстетике западного музыкального лейбла — с характером, анимациями и ощущением продуманности в каждой детали.
Не просто лендинг, а витрина бренда
Одностраничный сайт, который одновременно решает четыре ключевые задачи — визуальную, технологическую, поисковую и защитную.
Премиум-дизайн
Уровень западных лейблов: тёмная палитра, сложная типографика, медиа-эстетика без шаблонности.
Тренды 2026
Живые анимации, парящие эффекты, SVG-графика, scroll-reveal, glassmorphism, тонкие текстуры.
AI-поиск 2026
Schema.org и AI-атрибуты, чтобы сайт попадал в подсказки Яндекс.Алисы и выдачу AI-ответов.
Защита контента
Авторская музыка — главный актив. Плеер с максимальной защитой от скачивания файлов.
Атмосфера сцены в цифровом виде
В основу положили эстетику студийной фотографии: глубокий тёмно-синий фон как задник сцены, холодные сценические софиты и тёплые янтарные лампы в кулисах. Это считывается мгновенно — сайт воспринимается как часть живого музыкального пространства.
Палитра
Типографика
Более 40 отдельных анимационных эффектов
Сайт «живой» в каждой точке: кольца крутятся, частицы парят, виниловая пластинка вращается, кнопки реагируют на курсор. При этом всё оптимизировано — FPS держится на уровне 60 даже на мобильных.
Вращающиеся SVG-кольца
Пять концентрических колец с разными dash-паттернами и скоростями вращения. Создают ощущение ритма и движения в hero-блоке.
Парящие частицы
12 анимированных точек с разными траекториями, задержками и свечением. Имитация пылинок в сценических лучах.
Виниловая пластинка
Плеер содержит SVG-диск, который вращается только во время проигрывания — пауза останавливает анимацию.
Визуализатор звука
20-полосный эквалайзер на SVG с индивидуальными задержками. Анимируется плавно, не нагружая процессор.
Орбитальная композиция
Центральная иконка-звезда с пульсацией и свечением, вокруг которой летают точки-спутники с разными скоростями.
Scroll reveal
Через IntersectionObserver блоки плавно появляются при попадании в вьюпорт — лёгкий подъём и проявление прозрачности.
Hover-эффекты карточек
Подъём, появление градиентного бордера, радиальное свечение и масштабирование иконок — всё через чистый CSS.
Пульсирующая FAB-кнопка
Плавающая кнопка «Написать нам» с расширяющимся кольцом-пульсом, привлекающим внимание без агрессии.
Модальная форма
Плавное появление с масштабированием и blur-фоном. Форма с кастомным чекбоксом и валидацией в реальном времени.
Glow-пятна фона
Два огромных размытых цветовых пятна медленно дрейфуют по странице, создавая ощущение живого сценического света.
Кастомный плеер с защитой от скачивания
Одна из самых трудоёмких частей проекта. Стандартные решения (плагины, виджеты) не устраивали ни по дизайну, ни по уровню защиты. Поэтому собрали собственный плеер с нуля на JavaScript.
Что умеет: проигрывание 17 треков, переключение, перемотка, регулировка громкости, запоминание громкости при mute, автопереход к следующему треку, горячие клавиши (Space для play/pause, Shift+стрелки для переключения), touch-поддержка перемотки на мобильных, подсветка активного трека с волновой индикацией.
Как защищено: отсутствие прямых <audio> тегов в DOM, отключение правого клика и перетаскивания на плеере, а также серверная защита через .htaccess с проверкой referer — прямые ссылки на mp3 извне не работают, файлы доступны только с домена arockai.ru.
Подготовка сайта к поиску будущего
В 2026 году недостаточно просто добавить title и description. Мы прописали полную Schema.org разметку и AI-атрибуты, чтобы поисковые ассистенты понимали контент так же глубоко, как живой человек.
4 блока JSON-LD
MusicGroup — основные данные о группе (имя, дата основания, жанры, участники). WebSite — метаинформация о ресурсе. FAQPage — 7 вопросов и ответов, которые могут попасть напрямую в подсказки Алисы. Organization — контактные данные с указанием разработчика (внутренняя перелинковка для ВеоМедиа).
AI-атрибуты и микроразметка
На ключевых секциях прописаны data-ai-section (about-band, faq, music-player и др.) и itemprop по всем текстовым блокам. Это помогает AI-ассистентам (Яндекс.Алиса, Google SGE, ChatGPT Search) корректно извлекать и цитировать информацию.
Robots.txt и sitemap.xml
Индивидуально настроенный robots.txt с разрешениями для Яндекс и Google, но с блокировкой GPTBot, ClaudeBot и CCBot — чтобы авторский контент не использовался для обучения чужих моделей без согласия. Sitemap покрывает все якорные разделы одностраничника.
Open Graph и Twitter Card
Полный набор OG-метатегов с корректным og:image 1200×630, locale ru_RU, og:type music.band. При шеринге ссылки в мессенджерах и соцсетях — аккуратная красивая карточка вместо обрезанного превью.
Прозрачный процесс от брифа до запуска
Без фреймворков. Чистый код.
Сознательно отказались от React, Vue, Tilda и WordPress. Сайт работает напрямую, без прослоек — грузится быстро, не зависит от сторонних обновлений и легко редактируется.
Сайт, который работает на бренд
Клиент получил не просто сайт, а полноценный инструмент для продвижения на стриминговых платформах. Посетитель с первых секунд попадает в атмосферу группы, слушает треки, узнаёт историю коллектива и имеет ясный путь к контакту для сотрудничества.
Ребята сделали больше, чем мы ожидали. Это не просто сайт — это продолжение нашего звучания в визуальной форме. Особенно впечатлили анимации и то, как всё это работает быстро, без лагов.
Разработаем подобный сайт для вас
Индивидуальный дизайн, премиум-анимации, SEO и Schema.org, адаптив, форма обратной связи с защитой от спама. Никаких шаблонов и конструкторов — только чистый код под вашу задачу.
