HADAL - интерактивная веб-платформа для глубоководных экспедиций
Интерактивный веб-сайт для ознакомления с программой гражданских океанических исследований и подачи заявок на глубоководные погружения.
Основная задача: Визуализация физических условий погружения на глубину до 11 000 метров с помощью интерактивных эффектов и упрощение процесса регистрации кандидатов на экспедиции.
Что реализовано:
- Интерактивная телеметрия глубины, давления, температуры и освещенности, которая динамически обновляется во время скроллинга.
- Градиентное изменение цветовой гаммы интерфейса от поверхностной зоны до глубоководной тьмы с помощью Tailwind CSS.
- Эффект «морского снега» (дрейфующих микрочастиц) на базе Framer Motion для имитации погружения.
- Блок технических характеристик глубоководного аппарата DSV Erebus II в виде адаптивной сетки.
- Перечень обнаруженных глубоководных существ с интерактивными микроанимациями при наведении курсора.
- Карточки запланированных экспедиций в Марианский, Тонга и Кермадекский желоба с индикацией статусов и свободных мест.
- Интерактивная форма для отправки заявок на участие с обработчиком событий и обратной связью.
- Полная адаптивность интерфейса (мобильная версия телеметрии в статус-баре, десктопная — в боковой панели).
Технологии: React, TypeScript, TanStack Start, Framer Motion, Tailwind CSS, Radix UI, Lucide React, Bun
Основная задача: Визуализация физических условий погружения на глубину до 11 000 метров с помощью интерактивных эффектов и упрощение процесса регистрации кандидатов на экспедиции.
Что реализовано:
- Интерактивная телеметрия глубины, давления, температуры и освещенности, которая динамически обновляется во время скроллинга.
- Градиентное изменение цветовой гаммы интерфейса от поверхностной зоны до глубоководной тьмы с помощью Tailwind CSS.
- Эффект «морского снега» (дрейфующих микрочастиц) на базе Framer Motion для имитации погружения.
- Блок технических характеристик глубоководного аппарата DSV Erebus II в виде адаптивной сетки.
- Перечень обнаруженных глубоководных существ с интерактивными микроанимациями при наведении курсора.
- Карточки запланированных экспедиций в Марианский, Тонга и Кермадекский желоба с индикацией статусов и свободных мест.
- Интерактивная форма для отправки заявок на участие с обработчиком событий и обратной связью.
- Полная адаптивность интерфейса (мобильная версия телеметрии в статус-баре, десктопная — в боковой панели).
Технологии: React, TypeScript, TanStack Start, Framer Motion, Tailwind CSS, Radix UI, Lucide React, Bun