video-hyperframes
Cria animações contínuas de quadros compatíveis com Hyperframes e Remotion. Suporta reprodução automática, gerando movimentos fluidos e contínuos em vídeos.
O que ela faz
Transforma um texto em uma sequência de quadros animados, como um vídeo curto. Cada quadro mostra uma ideia ou cena, com texto grande e um visual. É feito para ser reproduzido automaticamente.
Quando usar
- ✓Criar apresentações visuais rápidas.
- ✓Resumir um artigo ou história em cenas.
- ✓Fazer posts animados para redes sociais.
Exemplo do que pedir para a IA
“Crie uma animação de quadros sobre a importância da reciclagem, com 5 cenas.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA divide seu texto em pequenas partes, cada uma virando um quadro. Ela adiciona um visual simples, texto grande e um código especial para que os quadros passem um após o outro automaticamente.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add nexu-io/open-design --skill video-hyperframesOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/examples/video-hyperframes/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
【Modelo: Quadros de Vídeo Hyperframes】
- Produz N quadros contínuos
<section class="frame">, cada umw-[1920px] h-[1080px]; N é determinado pela densidade de informação do [Conteúdo do Usuário] (roteiros curtos começam com 6-10 quadros, roteiros longos devem ter mais, cada quadro carrega apenas uma cena/conceito). - Cada quadro expressa uma cena/conceito: texto + composição visual (composição central / proporção áurea / regra dos terços).
- Marcador oculto
<!-- frame:N duration:3000 transition:fade -->na parte inferior de cada quadro para leitura posterior pelo script de renderização Remotion / Hyperframes. - Adiciona um JavaScript na parte superior para reprodução automática: muda para o próximo quadro a cada 3 segundos, também suporta controle por clique / teclas de seta; barra de progresso exibida no canto.
- O 1º quadro é o gancho (um dado / um contra-senso / uma pergunta), os quadros 2-N são a argumentação, e o último é a conclusão + CTA.
- Tamanho da fonte gigante (text-9xl), apenas uma frase, não amontoe.
- Esquema de cores unificado com sensação cinematográfica (fundo escuro + 1 cor de destaque neon).
- A saída final inclui um breve comentário
<!-- HYPERFRAMES_META: ... -->, contendo metadados JSON de duração / transição / resumo da cena de cada quadro, para posterior conversão para Remotion.
Perguntas frequentes
O que são 'frames'?
São como os quadros de um filme ou animação, cada um mostrando uma pequena parte da história ou ideia.
Como funciona a animação automática?
Um pequeno código é adicionado para que cada quadro apareça por alguns segundos e depois passe para o próximo, como um vídeo que toca sozinho.
Posso controlar a velocidade?
A animação é configurada para mudar a cada 3 segundos, mas o código gerado pode permitir controle manual, como clicar ou usar setas.
Detalhes
Descrição original do autor
Hyperframes / Remotion-compatible continuous frame animation with autoplay support.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #590
- Licença
- Apache-2.0
- Atualizada em
- 16/10/2026
Comentários
- …
Mais skills deste repositório
sample-plugin
Faz seu agente criar um arquivo de metadados para testes. Ele ajuda a garantir que o código funcione corretamente em diferentes situações.
nexu-io/open-design
aster-atelier
Ajuda seu agente a criar um site artístico com visual clássico. Ele usa imagens elegantes, céus azuis e fontes serifadas para um visual cinematográfico.
nexu-io/open-design
audio-jingle
Faz seu agente gerar áudio como jingles e efeitos sonoros. Ele pode criar músicas e vozes, salvando o resultado em um arquivo de áudio.
nexu-io/open-design
blog-post
Ajuda seu agente a escrever artigos longos ou posts de blog. Ele inclui espaços para imagens, citações e informações do autor.
nexu-io/open-design
Skills parecidas
blender-motion-state-inspection
Permite inspecionar detalhes de animações em 3D. É útil para verificar poses, movimentos e o alinhamento de personagens em animações.
affaan-m/ECC
manim-video
Faz seu agente criar vídeos explicativos animados. Ele usa o Manim para gerar gráficos e diagramas claros para conceitos técnicos.
affaan-m/ECC
remotion-video-creation
Orienta seu agente na criação de vídeos usando React com a biblioteca Remotion. Ele cobre boas práticas para animações, áudio, legendas e outros elementos visuais.
affaan-m/ECC