Концепт сайта · 2026
O’FIT: сайт фитнес-клуба
Сайт фитнес-клуба в Одинцово, где знакомство начинается с объёмной сцены, а продолжается выбором направления, занятия и клубной карты. Опубликованный концепт можно открыть и изучить целиком.
Задача
Что нужно
было решить
Передать характер O’FIT через движение, свет и спортивную сцену. За выразительным первым экраном сохранить понятный путь: узнать о клубе и бассейне, посмотреть направления, подобрать занятие и перейти к контакту.
Моя работа
От идеи
до реализации
Структура многостраничного сайта, визуальная концепция, подготовка изображений и отдельных слоёв сцены, адаптивная реализация на Next.js, GSAP-анимации, расписание с фильтрами, интерфейс клубных карт и публикация на сервере с HTTPS.
Возможности
Что есть в проекте
Основные сценарии и функции, которые можно увидеть в интерфейсе.
Сцена, которая движется
Фон зала, спортсменка и гири разделены на слои. Прокрутка меняет глубину сцены, а следующий блок собирается из осколков. На телефоне сохранена нативная прокрутка.
Клуб в подробностях
Обзор клуба, бассейн, залы и программы получили отдельные страницы. Общая шапка и полноэкранное меню связывают их с расписанием, ценами и контактами.
Расписание с фильтрами
Демонстрационные занятия можно отбирать по параметрам. Фильтры остаются под рукой при прокрутке и используют общий компонент выбора.
Выбор клубной карты
Карты на 1, 3 и 12 месяцев показывают цену за месяц и полную сумму. Выбор открывает описание условий, помогая сравнить форматы посещения.
Переходы в стиле проекта
Между страницами раскрывается бордовая клякса с гирями, а полноэкранное меню заполняется SVG-волной. Курсор и фоновая музыка дополняют атмосферу; звук можно отключить.
Версия с меньшим движением
Настройка уменьшения движения отключает сложные эффекты. Основные тексты и ссылки остаются в серверном HTML, а декоративный курсор используется только с мышью.
Техническая основа
Стек и его роль
Технологии выбираются под данные, интерфейс и способ работы продукта.
- Next.js · React · TypeScript
- Серверные страницы, общая навигация, типизированные данные направлений, расписания и клубных карт. Интерактивные части выделены в клиентские компоненты.
- GSAP · ScrollTrigger · SVG
- Сценарий движения по скроллу, сборка следующего блока из осколков, перенос персонажа, жидкая заливка меню и переходы между страницами.
- Canvas 2D · WebP
- Слоистая рекламная сцена с прозрачными изображениями и анимированным дымом. Отрисовка приостанавливается вне экрана и в скрытой вкладке.
- Radix UI
- Общий компонент выбора для фильтров расписания: раскрытие, клавиатурное управление и понятные состояния элементов.
- Docker · Traefik
- Отдельное контейнерное приложение, воспроизводимая сборка, HTTPS и сохранение предыдущего релиза для отката.
Реализация
Как это
устроено
- 01
Тёмный зал и бордовый акцент объединяют главный экран, внутренние страницы, меню и переходы в одну визуальную систему.
- 02
Рекламная сцена собрана из отдельных растровых слоёв. Движение по скроллу и реакция на указатель работают на разных обёртках, чтобы эффекты не мешали друг другу.
- 03
Вместо резкого перехода к обычному списку направлений следующий блок собирается из 18 осколков; персонаж переходит в его левую колонку.
- 04
Информация о клубе разделена на обзор, бассейн, залы и программы. Общая навигация сохраняется на всех страницах и сворачивается при прокрутке.
- 05
Расписание и клубные карты вынесены в отдельные сценарии с фильтрами, описаниями и ясным отображением стоимости. Демонстрационные данные помечены на соответствующих страницах.
- 06
Canvas ограничен по частоте кадров и размеру буфера, останавливается за пределами сцены и в скрытой вкладке. На мобильных сложная хореография упрощена.
- 07
Проект опубликован в отдельном Docker-приложении с HTTPS. Контактные действия ведут к звонку и информации клуба; фиктивной отправки заявки и оплаты нет.
Результат
Что получилось
Опубликован многостраничный фитнес-концепт с выразительным первым экраном, разделами клуба, интерактивным расписанием и выбором клубной карты. Движение поддерживает общую историю сайта, а содержание и основные действия доступны на компьютере и телефоне.