Уявіть: користувач заходить на промо-сайт нового продукту, але замість плавної анімації бачить затримки та ривки. 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 | Середня | Висока | Scroll-based анімації, таймлайни |
| Framer Motion | Низька | Середня | React-проєкти, прості переходи |
| Three.js | Висока | Вимагає оптимізації | 3D-сцени, інтерактивні продукти |
Зазначимо: як показує практика, 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 анімації на мобільних працюють гірше: продуктивність нижча, скрол нативний і менш передбачуваний.
Що входить у роботу над промо-сайтом під ключ?
- Аналітика та бриф — визначення цілей, цільової аудиторії, ключових механік.
- Прототипування — wireframes сценаріїв взаємодії (скрол, кліки, анімації).
- Дизайн-концепція — візуальний стиль, відмальовка ключових екранів.
- Фронтенд-розробка — реалізація анімацій, інтеграція 3D, адаптація під мобільні.
- Тестування продуктивності — перевірка LCP, CLS, INP, оптимізація.
- Деплой та підтримка — розміщення на Vercel/Netlify, налаштування редиректів, документація.
За запитом підключаємо A/B тестування та інтеграцію з CRM. Отримайте консультацію — наш фахівець оцінить ваш проєкт і запропонує оптимальні рішення.
Термін життя та підтримка
Промо-сайт події (конференція, запуск продукту) живе 2–6 місяців. Це потрібно враховувати при виборі інфраструктури: не варто підіймати повноцінний VPS з CI/CD для сторінки, яка працює 3 місяці. Vercel/Netlify з автодеплоєм з Git — оптимально.
Після завершення кампанії: або редирект на основний домен, або статичний архів (вимкнення JS, збереження візуального стану).
Типові терміни та вартість
| Тип проєкту | Терміни | Орієнтовна вартість |
|---|---|---|
| GSAP-анімації без 3D | 3–4 тижні | від $2000 |
| З 3D-моделями | 5–8 тижнів | від $5000 |
| Масштабні з A/B тестами | від 8 тижнів | від $8000 |
Зв'яжіться з нами для обговорення вашого промо-сайту.