Фронтенд и UI
Cinematic Scroll Storytelling
Рецепты на Lenis и GSAP ScrollTrigger для лендингов, управляемых скроллом.
Что это
Рабочий код для прелоадера, маскированных появлений разбитого текста, появлений секций, привязанных сцен с прокруткой, липких стопок карточек и параллакса на Lenis и GSAP ScrollTrigger.
Create cinematic scroll-driven landing pages with Lenis smooth scrolling, GSAP ScrollTrigger, scroll-linked progression, staggered text reveals, sticky card stacks, parallax backgrounds, scroll-scrubbed transitions, foot
Почему это важно для дизайна
- Токены движения фиксируют длительности, каскады, смещения и размытие, поэтому появления остаются согласованными.
- У каждого эффекта есть ветка reduced-motion, которая сохраняет раскладку и контраст нетронутыми.
- Порядок сборки ставит сначала статичную страницу, затем движение, избегая запутанных сцен скролла.
Что внутри
- Effect vocabulary
- Motion tokens
- Page anatomy
- Split text reveal
- Sticky card stack
- QA checklist
Как установить
Cinematic Scroll Storytelling
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/cinematic-scroll-storytelling/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Установите gsap и lenis, затем подключите Lenis к тикеру GSAP.
-
Пометьте секции data-атрибутами для появлений, стопок и параллакса.
-
Добавляйте привязанные сцены с прокруткой в последнюю очередь, затем прогоните QA-чек-лист.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Другие дизайн-плагины для Codex
Фронтенд и UI Что он делает gpt-taste Собирает премиальные лендинги в духе award-сайтов: GSAP-анимация скролла и плотные бенто-сетки без пустот. 
Дизайн-системы Что он делает Stitch Design Taste Пишет DESIGN.md, который уводит Google Stitch от шаблонных экранов. 
Фронтенд и UI Что он делает image-to-code Сначала генерирует изображения дизайна, разбирает их, а затем собирает соответствующий фронтенд-код. 
Фронтенд и UI Что он делает imagegen-frontend-mobile Генерирует премиальные флоу экранов мобильного приложения как изображения, а не код. Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.