Кейсы / Авторский сайт · Телесные практики
Красивый сайт, который дышит — и остаётся лёгким.
Лиана Светланова — кинезиолог и остеопрактик: женские практики, эстетика без инъекций, резет и кинерджетика — в Горячем Ключе, Краснодаре и онлайн. Её мастерской «Звучание женщины» нужен был сайт под стать работе, в которой главное — неспешность и внимание. Мы собрали его вокруг дыхания: всё движение на странице живёт в одном цикле, есть 3D-карта тела — и всё это не в ущерб ни скорости, ни доступности.
Проблема
Красивый сайт обычно тяжёлый.
В телесных практиках сайт — это первая встреча: человек должен почувствовать спокойствие и заботу ещё до того, как начнёт читать. Поэтому личные сайты в этой сфере часто делают ставку на эффект — огромные фото, анимации, иногда немного 3D. Расплачивается телефон: страницы грузятся рывками, движение отвлекает вместо того, чтобы вести, а те, кто ходит по сайту с клавиатуры или плохо переносит анимацию, остаются за бортом.
Есть и второй риск, тоньше: пообещать лишнее. Работа с телом касается сна, напряжения, лица — и легко соскользнуть в утверждения, которых не подтверждает ни одно исследование. Красивый сайт, который обещает слишком много, доверия не вызывает.
Наш ответ
Дизайн идёт за дыханием, и каждый эффект оправдывает свой вес.
Мы дали сайту один ритм — медленного дыхания. Из него выведена вся анимация, и работает она на нашем крошечном движке, а не на тяжёлой сторонней библиотеке. Самое эффектное — 3D-карту тела — мы облегчили до доли исходного веса. А тексты чётко разделяют, что доказано, а что — опыт. Так мы подходим к любому авторскому сайту: красота — да, но так, чтобы никто не остался за дверью.
Такт дыхания
Всё движение — в одном дыхании.
Пять с половиной вдохов в минуту: полный цикл длится 10,9 секунды. На это число настроен весь сайт — каждая длительность выведена из того же цикла, поэтому ничего не движется случайно или в спешке. Дышит даже заголовок: начертание букв медленно меняется по оси вариативного шрифта. Посетитель не считает секунды, но чувствует, что у страницы спокойный, ровный шаг — одинаковый от раздела к разделу.
Карта тела с телефона: мягкий свет, фигура с точками — повернуть её можно пальцем.
А если в настройках устройства включено «уменьшить движение», сайт соблюдает это до конца: вся анимация выключается, содержание остаётся.
Карта тела · 3D
3D-тело, которое никого не тормозит.
На странице /telo — трёхмерная модель тела с шестью точками, и каждая открывает свою панель. 3D быстро утяжеляет сайт: исходная модель весила 37,2 МБ. Мы уменьшили её до 0,55 МБ — с 831 198 до 41 550 треугольников. 3D-сцена загружается отдельно, а на главной, которая должна открываться быстро, WebGL нет вовсе.
3D-модель и рядом список шести мест: каждое открывает свою панель. Все шесть точек — настоящие кнопки, доступные с клавиатуры.
Тексты · фото · самостоятельность
Честно в текстах, цельно в картинках.
Красота авторского сайта — не только в движении. Она в интонации текстов, в цельности картинок — и в том, что автор может вести сайт сама, не зовя разработчика ради каждой запятой.
Четыре направления мастерской:
Дыхательный круг на странице /rezet — за ним можно следить глазами прямо с телефона.
Как сделано
Красиво — но прежде всего быстро, находимо и доступно.
Под поверхностью — современная и сдержанная сборка: React и TypeScript на Vite; three.js подключается только для карты тела. Сборка заранее генерирует для каждой страницы готовый HTML с содержанием — для того, кто приходит, будь то человек или поисковый робот, ещё до запуска JavaScript.
Сайт на русском языке и обращается к женщинам; он работает с сентября 2026 года.
Результат
Красота, за которую не платят скоростью.
весит первый экран, было 1 081 КБ — лабораторный замер
LCP, было 2,9 с — лабораторный замер разработчика
весит 3D-модель тела, было 37,2 МБ
СДЕЛАНО СТУДИЕЙ РЕМАРКА ДЛЯ ЗАКАЗЧИКА — МОЖНО ПРОВЕРИТЬ НА lianasvet.ru
Заинтересовал этот проект?
Нужен сайт или приложение под задачу? Давайте обсудим.
Проектируем и разрабатываем сайты и веб-приложения под задачу — для компаний и специалистов. Расскажите идею: ответим анализом или фиксированной сметой.
- Фиксированная смета за 24 часа
- Понятная цена, без сюрпризов
- Ваши данные остаются в ЕС
ЗАЯВКА ОТПРАВЛЕНА ✓
Спасибо. Отвечаем в течение рабочего дня.