Mantra Yoga Tomsk привозят в Томск DHIRA — вокалиста и исполнителя мантр, который ведёт в Москве свою школу Mantra Wave. Концерт пройдёт 23 октября в развлекательном центре «Факел», в зале «Этюд». Организаторам нужна была одна страница: открыл ссылку и сразу понял, что это за вечер, когда и где он пройдёт, сколько стоит билет и как его купить.
Главный читатель такой страницы — человек, который ни разу не был на мантра-концерте. Поэтому сразу после первого экрана идёт блок «Что будет в зале» с тремя ответами для новичка: музыка звучит вживую, мантры простые и подпевать не обязательно, быть йогом или вокалистом не нужно. Дальше — исполнитель: колода фотографий и четыре факта биографии, от «поёт мантры с 10 лет» до полугода в киртан-академии Маяпура. Потом два фрагмента с прошлых концертов на Rutube и фотографии из зала.
Онлайн-оплаты на сайте нет: организаторы продают билеты сами, в переписке и по телефону. Поэтому вся страница ведёт к одному действию — написать или позвонить. Блок «Билеты» свёрстан как настоящий входной билет с перфорацией и корешком, на корешке цены и четыре кнопки: MAX, Telegram, WhatsApp и телефон. На смартфоне контакты всегда под рукой: после первого экрана в углу появляется круглая кнопка, которая раскрывается веером, а внизу едет панель с датой, ценой и кнопкой «Купить билет». Панель прячется, когда человек и так смотрит на билет. В конце — карта с залом на втором этаже и кнопка маршрута в Яндекс Картах.
Визуально страница собрана как сценическая афиша. Тёмные экраны чередуются с бумажными, поверх лежит плёночное зерно, разделы подписаны моноширинными метками с номерами. На первом экране портрет DHIRA вырезан и стоит поверх огромного вордмарка, так что часть букв уходит ему за спину. Палитра — чернильно-чёрный, бумажный, оранжевый и маджента. Заголовки набраны Unbounded, текст — Onest, метки — JetBrains Mono. Наклонные таблички «Пой», «Дыши», «Слушай» подписаны на санскрите: деванагари и латинской транслитерацией. Все шрифты обрезаны до символов, которые встречаются на странице, и лежат на своём хостинге.
Под капотом чистые HTML, CSS и JavaScript без сборки, библиотеки лежат в репозитории, без CDN. За движение отвечает GSAP со ScrollTrigger: заголовки появляются построчно, у первого экрана три слоя параллакса, а билет на десктопе выпрямляется, пока к нему скроллишь. Плавный скролл даёт Lenis, бегущую ленту фотографий — Embla, колоду исполнителя можно листать свайпом. Если в системе включено ограничение анимации, параллакс и автопрокрутка выключаются. Ролики Rutube загружаются только после нажатия на play. Ранний билет стоит 1000 ₽ до 10 октября, а 11-го все цены на странице сами переключатся на 1500 ₽ по томскому времени, править сайт вручную не придётся. Поисковикам отдаётся разметка MusicEvent с местом, исполнителем и двумя ценами. Вёрстку и поведение страницы проверяют тесты на Playwright.
Технологии: HTML5, CSS, Vanilla JS, GSAP + ScrollTrigger, Lenis, Embla Carousel, JSON-LD, Playwright, GitHub Pages