Uma skill de agente para Claude Code e Codex que transforma movimentos gerados por IA em animações web controladas por scroll, mouse, arraste, toque ou orientação do dispositivo.
2,6 mil197PythonMITAtualizado há 16 dias
musoyangrigor/scroll-video-website-skill
Uma skill para agentes que converte vídeos em sequências otimizadas de frames WebP e cria páginas com canvas controladas pela rolagem.
- Estrelas
- 57
- Forks
- 5
- Issues abertas
- 0
- Último commit
- há 2 meses
O que é?
Scroll Video Website é uma skill portátil para agentes de IA que transforma um vídeo em uma página de tela cheia na qual rolar para frente ou para trás percorre os frames do vídeo. Basta informar o caminho do vídeo para que o agente converta o arquivo em frames WebP otimizados e gere a página responsiva controlada pela rolagem.
A página gerada usa um renderizador de canvas com mesclagem de frames adjacentes e carregamento progressivo de frames, permitindo avançar e retroceder pelo vídeo com fluidez. Ela preserva a stack existente do projeto e respeita as preferências de movimento reduzido. Por padrão, o resultado é uma experiência minimalista, apenas com canvas; você também pode indicar uma direção visual, como um estilo, depois do caminho.
A skill também inclui um comando optimize interativo para sequências de frames existentes. Ele mede os arquivos reais, testa a codificação de frames de amostra e informa o impacto estimado no tamanho para diferentes formatos, quantidades de frames e níveis de qualidade antes de reescrever qualquer arquivo. Ela segue o formato SKILL.md e pode ser instalada com npx skills add.
Recursos principais
- 01Converte um vídeo em uma sequência otimizada de frames WebP.
- 02Percorre os frames com fluidez nas duas direções, usando carregamento progressivo.
- 03Renderiza um canvas responsivo de tela cheia com mesclagem de frames adjacentes.
- 04Respeita as preferências de movimento reduzido e mantém a stack existente do projeto.
- 05Oferece um comando optimize interativo com estimativas de tamanho específicas para os arquivos.
Casos de uso
- Criar uma landing page de produto conduzida por um vídeo curto de demonstração.
- Criar páginas de storytelling baseadas na rolagem a partir de um filme ou clipe de animação.
- Prototipar seções de vídeo controladas pela rolagem em um projeto frontend existente.
- Reduzir o tamanho de sequências de frames já geradas para um site com rolagem.
Início rápido
- 1
Instale a skill
npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website - 2
Execute a skill no seu agente informando o caminho do vídeo
$scroll-video-website ./media/product-film.mp4
Antes de usar
- O README não informa quais ferramentas ou dependências a skill precisa para converter o vídeo em quadros WebP.
- É necessário um agente compatível com Agent Skills para executá-la; ela não é um aplicativo independente.
Tópicos
Perguntas frequentes
- O que é scroll-video-website-skill?
- Uma skill para agentes que converte vídeos em sequências otimizadas de frames WebP e cria páginas com canvas controladas pela rolagem. Scroll Video Website é uma skill portátil para agentes de IA que transforma um vídeo em uma página de tela cheia na qual rolar para frente ou para trás percorre os frames do vídeo. Basta informar o caminho do vídeo para que o agente converta o arquivo em frames WebP otimizados e gere a página responsiva controlada pela rolagem.
- scroll-video-website-skill é gratuito? Qual é a licença?
- scroll-video-website-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- scroll-video-website-skill ainda é mantido?
- Atualizado nos últimos 6 meses. O último commit de scroll-video-website-skill foi em 4 de set. de 2026.
- Para que posso usar scroll-video-website-skill?
- Criar uma landing page de produto conduzida por um vídeo curto de demonstração. Criar páginas de storytelling baseadas na rolagem a partir de um filme ou clipe de animação. Prototipar seções de vídeo controladas pela rolagem em um projeto frontend existente. Reduzir o tamanho de sequências de frames já geradas para um site com rolagem.
- Como instalar scroll-video-website-skill?
- Instale a skill: npx skills add musoyangrigor/scroll-video-website-skill --skill scroll-video-website Execute a skill no seu agente informando o caminho do vídeo: $scroll-video-website ./media/product-film.mp4
- Onde consigo scroll-video-website-skill?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/musoyangrigor/scroll-video-website-skill
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Agent Skills que ajudam agentes de programação a criar interfaces diferenciadas, usando direção de arte, fotos reais e uma verificação no navegador em vez de landing pages genéricas feitas por IA.
99,1 mil6,7 milJavaScriptMITAtualizado ontem
Diretório selecionado com mais de 1.000 Claude Skills e plugins para Claude Code, Claude.ai e agentes de programação como Codex, Cursor e Gemini CLI.
77,5 mil9,2 milPythonSem licençaAtualizado mês passado
Regras de layout e modelos que permitem a agentes de IA exportar documentos como PDF, PNG e PowerPoint editável.
12 mil557HTMLMITAtualizado anteontem
Uma skill de design de interfaces para agentes de IA que explora diferentes direções visuais, compara opções lado a lado e as refina com base em screenshots reais.
1,8 mil98PythonMITAtualizado anteontem
Plugin do Obsidian para navegar, criar e editar skills, comandos e agentes de IA em 17 ferramentas de programação, como Claude Code e Cursor.
85476TypeScriptMITAtualizado há 2 meses