Велнес · Иммерсивный сайт · Система управления студией
YogaRooted
Сайт из бумаги, воды и света и тихая система, которая управляет студией за кадром.
- Клиент
- YogaRooted
- Сфера
- Велнес · Занятия, курсы и консультации
- Рынок
- Испания · Онлайн
- Роль
- Арт-дирекшн, дизайн и full-stack разработка
- Период
- 2026
- Объём
- Иммерсивный сайт · Запись · Курсы · Счета · Отчёты
YogaRooted: студия йоги и медитации, которую ведёт одна преподавательница. В брифе просили ощущение, будто переступаешь порог каменного храма на рассвете: эпично, волшебно, с аурой и спокойно. Я вёл арт-дирекшн и сделал этот сайт на WebGL, а также спроектировал систему управления, которая за кадром ведёт записи, счета и отчёты.
Сайты о велнесе похожи друг на друга: закаты, стоковые позы, пастельный виджет записи. Студии нужно было обратное: место с настоящим присутствием, где при этом невозможно пропустить практическое (расписание, цены, запись). А за ним преподавательница, тонущая в пяти инструментах и бумажном календаре.
Один материал для всего: тёплая бумага, которая может стать водой, принять свет и удержать золото. Каждый зал является маленькой практикой; у каждого взаимодействия есть спокойная запасная версия.
Логотип оживает
Знак студии состоит из капли, двух листьев, открытого круга и двух точек. Вступление рассказывает ровно эту историю за тринадцать секунд: ветвь тушью и акварелью, капля, которая конденсируется и падает, бумага, ставшая водой, рябь, которая рисует золотую Шри-янтру, и наконец слово Enraizar, «пустить корни».
Здесь нет видео. Каждый кадр рисуется в реальном времени на Three.js и собственном GLSL: волокна бумаги, преломление, каустика, растекание туши.
Один и тот же зал в девять утра и в полночь
Сайт читает часы посетителя. На рассвете свет медный, в полдень ясный, в сумерках золотой. Ночью бумага становится глубоко-оливковой, тушь кремовой, а янтра светится. Ключевые кадры плавно интерполируются, а контраст измеряется, чтобы оставаться на уровне AA в любой час. Проведите по изображению:
Храм, нарисованный линия за линией
При прокрутке Шри-янтра строится так, как её рисуют от руки: сначала карандаш и циркуль, размерные линии и точки построения, затем лотос и ограда, и наконец сусальное золото поверх туши. Каждый этап называет свой санскритский термин, транслитерацию и источник.
Залы, которые вознаграждают внимание
Удерживайте ореол, и он научит квадратному дыханию. Посветите фонарём, и проявятся скрытые заметки. Замрите на четыре секунды, и проступят невидимые чернила: Йога-сутра на деванагари. Поверните ночное небо, пока звёзды не сложатся в лотос. А если нажать три узла янтры Сарасвати в правильном порядке, бумага треснет и впустит вас в медитацию с сопровождением.
- 2D-версия для слабых устройств и браузеров без WebGL
- Полноценная композиция для режима уменьшенного движения
- Адаптивная частота кадров: 60 fps при взаимодействии, 10 fps в покое
- Каждое взаимодействие доступно с клавиатуры
Запись в три шага
Практика → день и время → данные. Каждое место нарисовано как бинду (точка в центре янтры), поэтому «осталось два» становится информацией, а не давлением. Онлайн- и очные занятия делят один календарь; курсы, абонементы и консультации оформляются по одному и тому же пути, а счета создаются из заказа.
- 1Три шага, названные заранее
- 2Места как бинду под каждым днём
- 3Местное время и живая вместимость словами
Курсы, полевой блокнот и приложение ученика
Курсы переплетены как рукописи, каждый в своём пигменте из палитры. Полевой блокнот помнит залы, которые вы посетили, ваши дни дыхания и следующее занятие, а солнечные часы позволяют зафиксировать свет. У учеников есть собственное пространство, чтобы перезаписаться в два касания.
Система за экранами
Каждое решение вели четыре слова (эпично, магия, аура, покой), а держало их вместе одно напряжение: величие без шума. Весь сайт живёт на одном материале, тёплой бумаге, которая может стать водой, принять свет и удержать золото.
Цвет
Все цвета взяты из логотипа и акварельной ветви. Палитра меняется по местному времени посетителя: ночью бумага становится оливковой бездной, текст становится кремовым, а контраст пересчитывается на каждом ключевом кадре.
Типографика
Enraizar
Акцидент · заголовки · цитатыКонтрастный гарамон с настоящим курсивом: голос рукописи.
Hatha lento · 75 min · Quedan 2 plazas
Практический текст · расписание · записьЧистый и современный, чтобы практическая информация никогда не становилась мистикой.
Mūla · raíz
Надписи · мелкие подписиВысеченные римские капитали, скупо, как надписи на камне.
मूल योग यन्त्र
Санскритские терминыВсегда вместе с транслитерацией IAST и значением.
Сетка и отступы
- Колонки
- 12
- Макс. ширина
- 1440px
- Межколонник
- 24px
- Базовая единица
- 8px
Отступы растут по шагам Фибоначчи (8, 13, 21, 34, 55, 89), в тех же пропорциях, по которым строятся янтры, поэтому пустое пространство дышит, а не громоздится.
Решения и почему
-
01
Логотип как сценарий вступления
ПочемуКапля, два листа, открытый круг и две точки превращаются в первые тринадцать секунд: бренд узнают, а не показывают.
Вместо
Типовое видео с закатом на первом экране. -
02
Золото только там, где касается свет
ПочемуРедкость сохраняет его сакральным; избыток превращает в украшение.
Вместо
Золотые рамки на каждой карточке и кнопке. -
03
Места нарисованы как бинду
ПочемуВместимость становится частью визуального языка: честный дефицит, без обратных отсчётов.
Вместо
Красные плашки «Осталось всего 2!». -
04
Магия никогда не прячет расписание
Почему«Записаться на практику» остаётся в шапке каждого зала, простыми словами.
Вместо
Запись, спрятанная в самом конце.
Схема
- 1Капля: конденсируется на листе и падает на 4,2 с
- 2Два листа: акварельная ветвь, открывающая сцену
- 3Открытый круг: рябь, превращающая бумагу в воду
- 4Две точки: бинду: начало и цель, центр янтры
- Арт-дирекшн и визуальная концепция
- Иммерсивный сайт + 2D-версия
- Путь записи и оплаты
- Админ-приложение (7 модулей)
- Счета и отчёты
- Кабинет ученика
- Абонементы с автопродлением и паузой.
- Листы ожидания, которые автоматически заполняют освободившиеся места.
- Английская версия для иностранных гостей ретритов.
