Atomic
Маркетинговый сайт, управляемый анимацией, для аналитического SaaS-продукта, созданный так, чтобы страница рассказывала историю по мере прокрутки.
React 19
Vite
Tailwind CSS 4
GSAP
Locomotive Scroll
Framer Motion
Swiper
Обзор
Atomic — это лендинг для аналитического SaaS-продукта, построенный вокруг одного обещания: вы всегда знаете, что происходит в вашем бизнесе. У страницы есть одна, сложная задача. Она должна убедить посетителя, за одну прокрутку, что продукт выглядит современным и стоит того, чтобы зарегистрироваться. Я создал его как одностраничный опыт, где каждый раздел анимируется по мере вашего продвижения вниз, и все это заканчивается социальным доказательством.
Проблема
Лендинг оценивают в первые несколько секунд. Большинство маркетинговых шаблонов кажутся статичными и взаимозаменяемыми, и в тот момент, когда команда тянется к «премиальной» анимации, прокрутка становится дерганой, а время загрузки раздувается. Задача состояла в том, чтобы попасть в ту точку, которую упускает большинство сайтов: движение, которое кажется по-настоящему кинематографичным, не борясь с посетителем и не скрывая сообщение.
Моя роль и подход
Я отвечал за это от начала до конца: верстку, визуальный дизайн, структуру текста и анимацию. Вместо того, чтобы разбрасывать эффекты по странице, я рассматривал всю прокрутку как единую хореографическую последовательность и построил каждый раздел так, чтобы он раскрывался в нужный момент. Правило, к которому я постоянно возвращался, заключалось в том, что движение должно служить подаче. Оно должно сначала привлекать взгляд к заголовку, затем к продукту, затем к доказательству, а не украшать ради самого себя.
Стек технологий
Ключевые особенности
Галерея
Сложности и решения
Синхронизация анимации текста была самой сложной частью. SplitText измеряет заголовок и разбивает его на строки, но если он запускается до того, как веб-шрифты закончат загружаться, макет смещается, и разбиение ломается. Я привязал каждую анимацию текста к document.fonts.ready, так что разбиение происходит только после того, как настоящие шрифты окажутся на месте. Это устранило мерцание и перерисовку.
Второй сложной задачей была синхронизация трех анимационных движков. Механизм плавной прокрутки GSAP, прогресс-бар Framer Motion и библиотека Locomotive стремились одновременно контролировать позицию скролла. Я назначил GSAP ScrollSmoother единым источником истины и привязал остальные библиотеки к генерируемым им значениям, что позволило сохранить идеальную синхронность. На сенсорных устройствах я намеренно свел плавную прокрутку к минимуму, чтобы телефоны оставались отзывчивыми и не казались тормозящими.
Результат
Результат — быстрая целевая страница с хореографией прокрутки уровня продакшн, таким типом анимации, который многие маркетинговые сайты пытаются сделать, но мало кому удается реализовать чисто. Она работает как реальная страница продукта и как эталонный пример продвинутой фронтенд-анимации, которая не снижает производительность.
Столкнулись с похожей продуктовой задачей?
Расскажите о текущем состоянии продукта, необходимом результате и имеющихся ограничениях. На основе этого я сформулирую понятный первый этап.
Услуги разработки веб-приложений