Scroll-driven
Каждый кадр привязан к позиции скролла через GSAP ScrollTrigger.
Scroll-controlled videoПиксели.
Пиксели.
Скролл.
Магия.
Фоновое «видео» привязано к скроллу — каждый кадр синхронизирован с вашим движением
О проекте
Scroll-driven лендинг нового поколения
Демонстрационный одностраничник на Astro + React + GSAP. Каждая секция — отдельный модуль, готовый к выносу на отдельные страницы многостраничника.
- Scroll-controlled видео на фоне
- Пиксельные сцены: персонаж, лавина, логотип
- Морфинг слов и интерактивная сетка тем
Astro 6 React 19 GSAP Vite
Islands Architecture — интерактив только там, где нужен
Морфинг по скроллу
Возможности
Что внутри демо
Пиксельная графика
Персонаж, лавина и сборка логотипа — процедурная canvas-анимация.
Морфинг текста
Слова плавно трансформируются при прокрутке страницы.
Модульность
Astro-архитектура готова к расширению на многостраничник.
Пиксельная анимация
Три scroll-сцены на canvas
Персонаж идёт по скроллу, лавина пикселей сыпется и накапливается, затем фрагменты собираются в логотип.
01 — Персонаж
02 — Лавина
03 — Сборка логотипа
Темы оформления
Сетка с hover-эффектом
Каждая карточка реагирует на курсор: свечение, пиксели и магнитный градиент.
Неоновый город
Ночной мегаполис с неоновыми вывесками и дождём из пикселей.
Выбрать тему →Лесной пиксель
Органические формы в ретро-стиле 8-bit с мягким параллаксом.
Выбрать тему →Космическая одиссея
Звёздное поле, орбиты и scroll-controlled полёт через туманность.
Выбрать тему →Ретро-аркада
Классическая палитра CRT-экрана с пиксельными персонажами.
Выбрать тему →Минимализм
Чистая типографика, микро-анимации и акцент на контент.
Выбрать тему →Глитч-арт
Искажения, шум и хаотичная сборка пикселей в финальный кадр.
Выбрать тему →
0+ секций на лендинге
0fps плавность анимаций
0% scroll-controlled
0x интерактивных сцен
Процесс
Как собирается такой сайт
Концепт
Сценарий скролла, раскадровка ключевых кадров и точек триггера.
Прототип
Сборка секций в Astro, подключение GSAP и React-островов.
Анимация
Пиксели, видео-скраб, морфинг — всё синхронизируется со скроллом.
Полировка
Hover-эффекты, форма, адаптив и оптимизация производительности.
Архитектура
Готов к многостраничнику
Структура папок позволяет вынести любую секцию в отдельный маршрут Astro без переписывания логики.
src/
├── pages/
│ ├── index.astro ← лендинг (13 секций)
│ └── themes/[id].astro ← будущие страницы
├── components/
│ ├── sections/ ← Astro-секции
│ └── react/ ← интерактивные острова
├── data/ ← контент
└── scripts/ ← GSAP-утилиты Заявка
Обсудим ваш проект
Форма с select-полями: тип проекта, бюджет и сроки. React-компонент встроен как Astro island.