Задача
Что нужно было решить
Создать визуально привлекательный лендинг, который удерживает внимание и демонстрирует продукт через 3D-анимацию.
Проект Soda 3D
Soda 3D
Soda 3D — это визуально насыщенный одностраничный лендинг, созданный для презентации продукта через качественную 3D-анимацию и storytelling, зависящий от скролла. Страница разбита на несколько анимационных блоков, каждый из которых отвечает за отдельную часть истории — от появления баночек до динамических переходов, парящих сцен, карусели и финального блока бренда. Весь опыт построен на GSAP-анимациях и Three.js, создавая плавный, кинематографичный поток, реагирующий на действия пользователя и удерживающий внимание.
Галерея проекта
Начало анимации с появлением 3D баночек и заголовка
1/5
Галерея проекта
Плавный переход 3D баночек ко второму блоку с описанием
2/5
Галерея проекта
Парящая 3D баночка с текстом и GSAP scroll pin
3/5
Галерея проекта
Карусель вкусов с 3D баночками и ценами
4/5
Галерея проекта
Финальный блок с текстом и 3D баночкой на фоне
5/5
Галерея
01 / 05
Подход
Как был собран продукт
Использованы Next.js, Three.js, GSAP и React Three Fiber для создания системы анимаций, управляемых скроллом, с несколькими синхронизированными сценами и плавными переходами.
Акценты
Ключевые возможности
07 пункта
- + 3D анимации от скролла
- + Несколько анимационных блоков
- + GSAP timeline и pin эффекты
- + Парящие 3D объекты
- + Интерактивная карусель продукта
- + Кинематографичные переходы
- + Иммерсивный лендинг
Результат
Почему это важно
- Демонстрирует продвинутые навыки анимации и 3D
- Показывает умение создавать premium лендинги
- Подчеркивает сильное визуальное мышление