Ecstatic Dance Ural

Человек, который впервые слышит про экстатик-дэнс, не знает, чего ждать, и стесняется прийти. Сайт должен снять это напряжение до первого текста и потом коротко ответить на главные вопросы: что это, кто ведёт и как попасть.

Ограничения

• Секвенция кадров тяжёлая — нужна предзагрузка и бережный режим для телефонов
• Без фреймворков и сборки
• Настройка «уменьшить движение» должна получить полноценную страницу

Свободный танец трудно объяснить словами, поэтому сайт сначала даёт ощущение: посетитель листает страницу и летит к месту встречи. Только потом — слова.

Типографика

Мягкая антиква с живым курсивом для заголовков и спокойный гротеск в тексте — голос ведущей, а не афиши.

Движение

Одна сцена на весь сайт — полёт. Он объясняет практику лучше абзаца текста, поэтому всё остальное неподвижно.

Композиция

Кадр закрывается в арку — и начинается обычная страница с форматами встреч.

Прокрутка не двигает страницу, а перематывает кадры полёта: дрон идёт над озером, входит в лес и прилетает к куполу. Кадры рисуются в canvas, поверх них сменяются шесть коротких остановок. Затем кадр закрывается в арку, и начинается обычная страница с форматами встреч и рассказом о ведущей.

• Секвенция кадров в canvas с предзагрузкой, один цикл анимации на весь сайт
• Отдельный режим для вертикальных экранов: резкая полоса кадра поверх размытой копии
• При prefers-reduced-motion вместо полёта показывается статичный кадр
• Никаких фреймворков и сборки: чистый HTML, CSS и JavaScript

Сайт открыт по адресу dance.bios74.ru и доводится: он ещё закрыт от поисковиков, тексты и фотографии уточняются вместе с сообществом.