Проєкт Soda 3D

Soda 3D

Soda 3D — це візуально насичений односторінковий лендинг, створений для презентації продукту через якісну 3D-анімацію та storytelling, що залежить від скролу. Сторінка поділена на кілька анімаційних блоків, кожен з яких відповідає за окрему частину історії — від появи баночок до динамічних переходів, парящих сцен, каруселі та фінального блоку бренду. Увесь досвід побудований на GSAP-анімаціях та Three.js.

Next.js Three.js GSAP 3D анімація Лендінг

Демо GitHub / Джерело

Початок анімації з появою 3D баночок та заголовка — Галерея проєкту

Початок анімації з появою 3D баночок та заголовка

1/5

Плавний перехід 3D баночок до блоку з описом — Галерея проєкту

Плавний перехід 3D баночок до блоку з описом

2/5

Паряча 3D баночка з текстом та GSAP scroll pin — Галерея проєкту

Паряча 3D баночка з текстом та GSAP scroll pin

3/5

Карусель смаків з 3D баночками та цінами — Галерея проєкту

Карусель смаків з 3D баночками та цінами

4/5

Фінальний блок з текстом та 3D баночкою на фоні — Галерея проєкту

Фінальний блок з текстом та 3D баночкою на фоні

5/5

Галерея

01 / 05

Завдання

Що потрібно було вирішити

Створити візуально привабливий лендинг, який утримує увагу та демонструє продукт через 3D-анімацію.

Підхід

Як був зібраний продукт

Використано Next.js, Three.js, GSAP та React Three Fiber для створення системи анімацій, керованих скролом, з кількома синхронізованими сценами та плавними переходами.

Акценти

Ключові можливості

07 пункти

+ 3D анімації від скролу
+ Кілька анімаційних блоків
+ GSAP timeline та pin ефекти
+ Парячі 3D об'єкти
+ Інтерактивна карусель продукту
+ Кінематографічні переходи
+ Іммерсивний лендинг

Результат

Чому це важливо

Демонструє просунуті навички анімації та 3D
Показує вміння створювати premium лендинги
Підкреслює сильне візуальне мислення