Навык агента для Claude Code и Codex, превращающий созданную ИИ анимацию в веб-анимации, управляемые прокруткой, мышью, перетаскиванием, касанием или ориентацией устройства.
2,6 тыс.197PythonMITОбновлён 16 дней назад
musoyangrigor/scroll-video-website-skill
Навык для AI-агентов, который преобразует видео в оптимизированную последовательность кадров WebP и создаёт сайт с canvas, управляемым прокруткой.
- Звёзды
- 57
- Форки
- 5
- Открытые issues
- 0
- Последний коммит
- 2 месяца назад
Что это?
Scroll Video Website — переносимый навык для AI-агентов, который превращает видео в полноэкранную страницу: прокрутка вперёд или назад перемещает между кадрами. Передайте ему путь к видео — агент преобразует ролик в оптимизированные кадры WebP и создаст адаптивную страницу с управлением через прокрутку.
Созданная страница отображает видео на canvas, смешивая соседние кадры и загружая их по мере необходимости, поэтому прокрутка по видео плавно работает в обоих направлениях. Навык сохраняет стек существующего проекта и учитывает предпочтение reduced motion. По умолчанию он создаёт минимальную страницу только с canvas, но после пути к видео можно указать визуальное направление, например стиль.
В навык также входит интерактивная команда optimize для уже созданных последовательностей кадров. Она анализирует реальные ресурсы, пробно кодирует образцы кадров и оценивает влияние на размер при выборе формата, количества кадров и качества — до перезаписи каких-либо файлов. Навык соответствует формату SKILL.md и устанавливается командой npx skills add.
Ключевые возможности
- 01Преобразует видео в оптимизированную последовательность кадров WebP.
- 02Обеспечивает плавную прокрутку в обоих направлениях с постепенной загрузкой кадров.
- 03Отображает адаптивный полноэкранный canvas со смешиванием соседних кадров.
- 04Учитывает предпочтение reduced motion и сохраняет стек существующего проекта.
- 05Предлагает интерактивную команду optimize с оценкой размера для конкретных файлов.
Сценарии использования
- Создание посадочной страницы продукта, управляемой коротким демонстрационным видео.
- Создание страниц с повествованием через прокрутку на основе фильма или видеоролика.
- Прототипирование секций с прокруткой по кадрам видео в существующем frontend-проекте.
- Уменьшение размера уже созданных последовательностей кадров для сайта с прокруткой.
Быстрый старт
- 1
Установите skill
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website - 2
Запустите skill в своём агенте, указав путь к видео
$scroll-video-website ./media/product-film.mp4
Что важно знать
- В README не указано, какие инструменты или зависимости нужны skill для преобразования видео в кадры WebP.
- Для запуска нужен агент, совместимый с Agent Skills; это не автономное приложение.
Темы
Частые вопросы
- Что такое scroll-video-website-skill?
- Навык для AI-агентов, который преобразует видео в оптимизированную последовательность кадров WebP и создаёт сайт с canvas, управляемым прокруткой. Scroll Video Website — переносимый навык для AI-агентов, который превращает видео в полноэкранную страницу: прокрутка вперёд или назад перемещает между кадрами. Передайте ему путь к видео — агент преобразует ролик в оптимизированные кадры WebP и создаст адаптивную страницу с управлением через прокрутку.
- scroll-video-website-skill можно использовать бесплатно? Какая у него лицензия?
- scroll-video-website-skill распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
- scroll-video-website-skill всё ещё поддерживается?
- Обновлялся за последние 6 месяцев. Последний коммит в scroll-video-website-skill — 4 сент. 2026 г..
- Для чего можно использовать scroll-video-website-skill?
- Создание посадочной страницы продукта, управляемой коротким демонстрационным видео. Создание страниц с повествованием через прокрутку на основе фильма или видеоролика. Прототипирование секций с прокруткой по кадрам видео в существующем frontend-проекте. Уменьшение размера уже созданных последовательностей кадров для сайта с прокруткой.
- Как установить scroll-video-website-skill?
- Установите skill: npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website Запустите skill в своём агенте, указав путь к видео: $scroll-video-website ./media/product-film.mp4
- Где скачать scroll-video-website-skill?
- Исходный код и инструкции по установке — на GitHub: https://github.com/musoyangrigor/scroll-video-website-skill
Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.
Похожие проекты
Agent Skills помогают coding-агентам создавать выразительные интерфейсы: выбирать арт-направление, использовать реальные фотографии и проверять результат в браузере вместо генерации типовых AI-страниц.
99,1 тыс.6,7 тыс.JavaScriptMITОбновлён вчера
Подборка из более чем 1000 Claude Skills и плагинов для Claude Code, Claude.ai и ИИ-агентов для программирования, таких как Codex, Cursor и Gemini CLI.
77,5 тыс.9,2 тыс.PythonБез лицензииОбновлён в прошлом месяце
Правила вёрстки и шаблоны, с помощью которых AI-агенты создают документы в PDF, PNG и редактируемом PowerPoint.
12 тыс.557HTMLMITОбновлён позавчера
Навык проектирования интерфейсов для AI-агентов: предлагает разные варианты дизайна, сравнивает их и дорабатывает по реальным скриншотам.
1,8 тыс.98PythonMITОбновлён позавчера
Плагин Obsidian для просмотра, создания и редактирования навыков, команд и файлов агентов для 17 инструментов разработки, включая Claude Code и Cursor.
85476TypeScriptMITОбновлён 2 месяца назад