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

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

Промо-сайт — временная или постоянная площадка под конкретную кампанию, продукт, событие или запуск. Отличается от корпоративного сайта и лендинга: живёт в рамках одной идеи, часто имеет высокую насыщенность интерактивными элементами, нестандартные анимации, визуальный сторителлинг. Примеры: промо нового автомобиля, страница игры или приложения, сайт конференции, промо нового продукта 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 — библиотека для smooth scroll, заменяет нативный скролл на более контролируемый. Часто используется в связке с 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 всего, что не в 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;
  }
}

В 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 недель.