Розробка промо-сайтів з анімаціями GSAP і 3D Three.js | Ціни та терміни

Уявіть: користувач заходить на промо-сайт нового продукту, але замість плавної анімації бачить затримки та ривки. LCP перевищує 4 с, тривимірна модель відмальовується лише після повторного завантаження. Це результат ігнорування оптимізації. Наша команда вирішує цю проблему, поєднуючи візуальну складність із продуктивністю. Ми розробляємо промо-сайти, які не просто показують продукт, а створюють історію. Звичайні лендінги давно не дивують — користувач прокручує їх за секунди. Анімації, 3D, відео та інтерактив утримують увагу на 300% довше. Наш досвід — понад 10 років у веб-розробці, 50+ реалізованих проєктів. Ми гарантуємо якість та швидкість.

Відмінність промо-сайту від лендінгу

Лендінг орієнтований на конверсію: мінімум відволікань, максимум шляху до дії. Промо може конвертувати, але первинна мета — залучення, запам'ятовуваність, створення настрою навколо продукту. Бюджет анімацій та візуальної частини значно вищий. Користувач залишається довше — і це очікувано. Вартість проєкту стартує від $2000 і залежить від складності, але часто окупається зростанням впізнаваності.

Технічний стек

Промо-сайти — один із небагатьох контекстів, де виправдані важкі JavaScript-бібліотеки для анімацій.

GSAP (GreenSock) — стандарт для scroll-based анімацій та timeline-сценаріїв. ScrollTrigger плагін дозволяє синхронізувати анімацію з позицією скролу:

import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); gsap.to('.product-image', { y: -100, scale: 1.2, ease: 'none', scrollTrigger: { trigger: '.product-section', start: 'top center', end: 'bottom top', scrub: 1.5, } }); 

Three.js / R3F (React Three Fiber) — для 3D-елементів. Промо автомобіля, інтерактивний 3D-продукт, particle-системи. Вимагає оптимізації під мобільні: LOD (levels of detail), обмеження FPS, fallback для слабких пристроїв.

import { Canvas } from '@react-three/fiber'; import { useGLTF, OrbitControls, Environment } from '@react-three/drei'; function ProductModel() { const { scene } = useGLTF('/models/product.glb'); return <primitive object={scene} />; } export function ProductViewer() { return ( <Canvas camera={{ position: [0, 0, 3], fov: 45 }}> <Environment preset="studio" /> <ProductModel /> <OrbitControls enableZoom={false} /> </Canvas> ); } 

Lenis — бібліотека для smooth scroll, замінює нативний скрол на більш контрольований. Часто використовується у зв'язці з GSAP ScrollTrigger.

Framer Motion — для React-проєктів з менш складними анімаціями. Достатньо для більшості промо з переходами між секціями.

Чому GSAP ефективніший для scroll-based анімацій?

Зазначимо: як показує практика, GSAP у 2–3 рази продуктивніший за Framer Motion при складних scroll-based анімаціях — це підтверджують тести на реальних проєктах GreenSock Documentation. Three.js з Draco-стисненням зменшує розмір моделей на 90%.

Типові блоки промо-сайту

Hero з відео або 3D. Автовідтворення відео без звуку, muted + playsinline для iOS:

<video autoplay muted loop playsinline poster="/poster.jpg" preload="none" > <source src="/hero.webm" type="video/webm"> <source src="/hero.mp4" type="video/mp4"> </video> 

Scroll storytelling. Кожна секція розкривається у міру скролу. Технічно — pin-секції через ScrollTrigger + синхронізовані timeline:

const tl = gsap.timeline({ scrollTrigger: { trigger: '.story-section', pin: true, start: 'top top', end: '+=300%', scrub: true, } }); tl.from('.chapter-1', { opacity: 0, y: 50 }) .to('.chapter-1', { opacity: 0 }) .from('.chapter-2', { opacity: 0, y: 50 }); 

Інтерактивний елемент. Курсор змінює вигляд, елементи реагують на mousemove, hotspot на зображенні з підказками. Все це — функції залучення, не конверсії.

Лічильники та динамічні дані. Анімовані числа, живі оновлення (якщо продукт/подія актуальні в реальному часі через WebSocket).

Оптимізація промо-сайту для продуктивності

Парадокс промо-сайту: він має бути візуально багатим і при цьому завантажуватися швидко. Методи балансу:

• progressive reveal — завантаження контенту по мірі скролу, не всього одразу;
• preload критичних ресурсів — hero-відео, перший 3D-асет;
• defer всього, що не в first screen;
• WebP/AVIF для всіх зображень, draco compression для 3D-моделей;
• code splitting — кожна секція як окремий chunk;
• reduced-motion — вимкнення анімацій для користувачів з prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) { .animated-element { animation: none; transition: none; } } 

Додатково використовуємо window.matchMedia для програмного вимкнення анімацій. Цільовий LCP — менше 2,5 с, на практиці досягаємо 1,8–2,2 с при прогресивному завантаженні.

Мобільна версія промо

Промо-сайти часто розробляються з фокусом на десктоп, мобільна версія — спрощена. Це нормальна практика, якщо спрощення прийняте усвідомлено та зафіксоване в ТЗ. Важкі scroll-based анімації на мобільних працюють гірше: продуктивність нижча, скрол нативний і менш передбачуваний.

Що входить у роботу над промо-сайтом під ключ?

1. Аналітика та бриф — визначення цілей, цільової аудиторії, ключових механік.
2. Прототипування — wireframes сценаріїв взаємодії (скрол, кліки, анімації).
3. Дизайн-концепція — візуальний стиль, відмальовка ключових екранів.
4. Фронтенд-розробка — реалізація анімацій, інтеграція 3D, адаптація під мобільні.
5. Тестування продуктивності — перевірка LCP, CLS, INP, оптимізація.
6. Деплой та підтримка — розміщення на Vercel/Netlify, налаштування редиректів, документація.

За запитом підключаємо A/B тестування та інтеграцію з CRM. Отримайте консультацію — наш фахівець оцінить ваш проєкт і запропонує оптимальні рішення.

Термін життя та підтримка

Промо-сайт події (конференція, запуск продукту) живе 2–6 місяців. Це потрібно враховувати при виборі інфраструктури: не варто підіймати повноцінний VPS з CI/CD для сторінки, яка працює 3 місяці. Vercel/Netlify з автодеплоєм з Git — оптимально.

Після завершення кампанії: або редирект на основний домен, або статичний архів (вимкнення JS, збереження візуального стану).

Типові терміни та вартість

Зв'яжіться з нами для обговорення вашого промо-сайту.