Фронтенд и UI
Masked Reveal
Раскрывает заголовки слово за словом через overflow-маску при скролле.
Что это
Паттерн GSAP ScrollTrigger, который разбивает заголовок на маскированные словесные span и каскадом поднимает их вверх, когда текст входит во вьюпорт. Включает паттерн очистки для React.
Create masked staggered word reveals on scroll with GSAP ScrollTrigger. Use when headings, hero copy, section titles, or editorial text should reveal word-by-word through an overflow mask as they enter the viewport.
Почему это важно для дизайна
- Каскад на уровне слов читается спокойнее и редакционнее, чем анимация по буквам.
- Скринридеры всё равно получают полный текст через aria-label.
- Пользователи с reduced-motion видят статичный текст без применённых transform.
Что внутри
- Use when
- Motion defaults
- CSS mask
- GSAP ScrollTrigger
- React cleanup pattern
- Quick checks
Как установить
Masked Reveal
-
Клонируйте репозиторий.
git clone https://github.com/MengTo/Skills -
Укажите Codex на файл скилла.
agent-skills/web-design/masked-reveal/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Пометьте заголовок через data-masked-reveal и добавьте CSS-правила маски.
-
Вызовите хелпер разбивки, который обходится без платного плагина SplitText.
-
Оберните в GSAP-контекст в React, чтобы ScrollTrigger очищался при смене маршрута.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке 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. Свой ключ, свой результат.