scroll-experience · davila7 — скилл для Claude Code: что делает и как установить
Помогает создавать скролл-анимации, параллакс и интерактивные презентации продуктов. Пригодится для промо-страниц, где подача материала завязана на движение страницы.
npx claude-code-templates@latest --skill creative-design/scroll-experienceЧто делает scroll-experience
Скилл подсказывает архитектуру интерактивных веб-страниц, чья динамика привязана к прокрутке. Внутри собраны шаблоны для разных библиотек: сложные цепочки с GSAP ScrollTrigger, связки для React через useScroll во Framer Motion и нативный CSS с animation-timeline. Для плавного хода предлагаются варианты на Lenis или Locomotive Scroll.
Сценарии охватывают горизонтальные галереи, фиксацию блоков через GSAP Pin и послойный параллакс со скоростью от 0.2x для фона до 1.2x для переднего плана. Текстовые блоки структурируются по шагам: вводный экран, контекст, развитие сюжета, кульминация и итоговый призыв к действию.
Главное ограничение — запрет на скролл-джекинг. Перехват стандартного скролла ломает мобильные жесты и портит доступность.
Какие задачи решает
- настроить послойный параллакс с разной скоростью движения слоёв
- закрепить секцию на экране во время прокрутки с помощью GSAP Pin
- собрать горизонтальный скролл для витрины или галереи
- связать CSS-анимацию с положением страницы через
animation-timeline
Примеры запросов агенту
- Сделай послойный параллакс на GSAP ScrollTrigger с медленным фоном и быстрым передним планом
- Добавь горизонтальную галерею с фиксацией экрана через GSAP Pin
- Настрой анимацию появления текста при скролле с помощью Framer Motion
Как установить scroll-experience
1Через claude-code-templates
npx claude-code-templates@latest --skill creative-design/scroll-experience2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill scroll-experience -a claude-code3Вручную: положить файлы
~/.claude/skills/scroll-experience/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/scroll-experience/
Вручную: положить файлы
.agents/skills/scroll-experience/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/scroll-experience/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates scroll-experience2Вручную: положить файлы
.github/skills/scroll-experience/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/creative-design/scroll-experienceВручную: положить файлы
.devin/skills/scroll-experience/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о scroll-experience
Как установить scroll-experience в Claude Code?
Выполните команду npx claude-code-templates@latest --skill creative-design/scroll-experience. Шаблон скилла загрузится в окружение Claude Code.
Зачем нужен скилл scroll-experience?
Он помогает проектировать кинематографичные страницы с параллаксом, пошаговым повествованием и фиксацией блоков. Скилл даёт проверенные паттерны под GSAP, Framer Motion и нативный CSS.
Какие библиотеки для анимаций поддерживает скилл?
В руководстве рассмотрены GSAP ScrollTrigger, Framer Motion, библиотеки плавной прокрутки Lenis и Locomotive Scroll, а также нативные CSS-свойства вроде animation-timeline.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — scroll-experience от других авторов.
