Розробка промо-сайту

Розробка промо-сайту

Промо-сайт — тимчасова або постійна площадка для конкретної кампанії, продукту, події або запуску. Відрізняється від корпоративного сайту та лендинга: існує в рамках однієї ідеї, часто має високу насиченість інтерактивними елементами, нестандартні анімації, візуальний сторітелінг. Приклади: промо нового автомобіля, сторінка гри або додатку, веб-сайт конференції, промо нового продукту FMCG.

Чим промо відрізняється від лендинга

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

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

Промо-сайти — один з небагатьох контекстів, де виправдані важкі 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 — бібліотека для плавного скролу, замінює нативний скролл на більш контрольований. Часто використовується разом з GSAP ScrollTrigger.

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

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

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 усього, що не на першому екрані
• WebP/AVIF для всіх зображень, draco compression для 3D-моделей
• code splitting — кожна секція як окремий chunk
• reduced-motion — вимкнення анімацій для користувачів з prefers-reduced-motion:

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

В JS:

const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
if (!prefersReduced) {
  initAnimations();
}

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

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

Альтернатива: окремий сценарій для мобільних без pin-секцій — автоматичний перехід по кліку замість скролу, спрощені CSS-анімації.

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

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

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

Типові терміни

Промо без 3D, з GSAP-анімаціями та нестандартним дизайном — 3-4 тижні. З 3D-моделями, інтерактивним переглядачем продукту або кастомними WebGL-ефектами — 5-8 тижнів. Масштабні промо з кількома мовами, A/B тестами та інтеграціями — від 8 тижнів.