GSAP
Промпт, которым я это сделал
Сделай одностраничный лендинг одним файлом index.html, библиотеки GSAP (ScrollTrigger) и Lenis можно с CDN. Первый экран: крупный заголовок «Сайт, который раскрывается при скролле», под ним небольшое скруглённое окно с макетом интерфейса продукта (собери макет прямо в HTML: боковое меню, график, пара карточек). При прокрутке окно плавно растёт до полного экрана, скругления уходят, заголовок разъезжается в стороны и тает. Когда окно раскрылось полностью — следующая секция с тремя карточками преимуществ. Тёмная тема, акцент #E8723C, шрифт Inter. Плавный скролл через Lenis. На телефоне всё работает так же.
Что получится
- Раскрытие окна на весь экран, привязанное к скроллу
- Макет интерфейса из HTML, а не картинка: цифры и график оживают по ходу
- Та же анимация на телефоне
Подойдёт
- Первый экран лендинга продукта или сервиса
- Показать интерфейс «как у Apple» без видео
Не подойдёт
- Сайты на конструкторах без своего кода
Похожие работы
-
Видео-фон
Видео-фон в первом экране без стока
Claude Code нарисовал светящиеся волны в canvas, записал их в бесшовное видео на 8 секунд и поставил фоном под заголовок.
-
Three.js
3D-шар из частиц, который следит за курсором
Шар из 6 тысяч светящихся частиц поворачивается к курсору, а частицы под ним разлетаются и возвращаются на место.
-
GSAP
Анимации сайта на GSAP
Шоурил библиотеки GSAP. Официальные скиллы учат агента писать такие анимации: по скроллу, на таймлайне, с SplitText и Flip.
-
Transitions.dev
Переходы интерфейса, которые агент ставит сам
Агент добавляет в проект проверенные CSS-переходы: модалки, меню, тосты, аккордеоны, скелетоны загрузки.
Новые ролики и разборы — в TelegramПишу, как я делаю свои ролики, и добавляю сюда новые скиллы.
Открыть канал