Представьте: пользователь заходит на промо-сайт нового продукта, но вместо плавной анимации видит задержки и рывки. LCP превышает 4 с, трёхмерная модель отрисовывается только после повторной загрузки. Это результат игнорирования оптимизации. Наша команда решает эту проблему, сочетая визуальную сложность с производительностью. Мы разрабатываем промо-сайты, которые не просто показывают продукт, а создают историю. Обычные лендинги давно не удивляют — пользователь пролистывает их за секунды. Анимации, 3D, видео и интерактив удерживают внимание на 300% дольше. Наш опыт — более 10 лет в веб-разработке, 50+ реализованных проектов.
Отличие промо-сайта от лендинга
Лендинг ориентирован на конверсию: минимум отвлечений, максимум пути к действию. Промо может конвертировать, но первичная цель — вовлечение, запоминаемость, создание настроения вокруг продукта. Бюджет анимаций и визуальной части значительно выше. Пользователь остаётся дольше — и это ожидаемо. Стоимость проекта рассчитывается индивидуально, но часто окупается ростом узнаваемости.
Технический стек
Промо-сайты — один из немногих контекстов, где оправданы тяжёлые 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 недели |
| С 3D-моделями | 5–8 недель |
| Масштабные с A/B тестами | от 8 недель |
Свяжитесь с нами для обсуждения вашего промо-сайта.