video-template-frame-data-rollup
Faz seu agente criar vídeos de dados que se atualizam dinamicamente. Ele mostra barras crescendo e números mudando de forma sincronizada e realista.
O que ela faz
Este modelo cria um vídeo curto onde números e barras crescem animadamente, mostrando dados de forma dinâmica. É ideal para apresentar métricas ou crescimento de forma visualmente interessante.
Quando usar
- ✓Para mostrar o crescimento semanal de vendas.
- ✓Para apresentar resultados de pesquisas com gráficos animados.
- ✓Para destacar um dado importante em um vídeo maior.
Exemplo do que pedir para a IA
“Crie um vídeo mostrando o aumento de seguidores no último mês, com barras crescendo e os números subindo de 1000 para 5000.”
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
Você insere seus números e textos no código do modelo. Ele usa um efeito de mola para fazer os números e as barras aparecerem suavemente, como se estivessem crescendo do zero até o valor final.
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-template-frame-data-rollupOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-data-rollup/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.
Frame de Rolagem de Dados
Um frame de dados nativo do Remotion — barras crescem do zero com dados reais através de física de mola enquanto os números rolam 0→alvo em sincronia.
O que este template é
Uma composição de movimento do Remotion (React/TSX) pronta para HyperFrames, empacotada sob source/. Ela renderiza deterministicamente para MP4 / WEBM em 16:9, 9:16, 1:1, padrão de 15s, 30fps.
Melhor para: Um frame de dados onde os números devem animar, não ficar estáticos · Barras de métricas semanais / crescimento impulsionadas por valores reais · Melhorar um segmento de dados de um vídeo HyperFrames já existente
Fluxo de Trabalho
- Leia
source/entry.tspara entender as camadas nomeadas e a linha do tempo da animação. - Substitua o texto de exemplo (títulos, números, rótulos) pelo conteúdo real do usuário; mantenha o tempo do movimento e a assinatura visual intactos.
- Mantenha a composição autossuficiente sob
source/; não introduza ativos de rede externos que quebrariam uma renderização headless. - Renderize para MP4 através do renderizador html-video / HyperFrames.
Atribuição
Fonte: html-video templates/frame-data-rollup (licença Apache-2.0).
Perguntas frequentes
O que são 'HyperFrames'?
HyperFrames é uma forma de criar vídeos com dados que se atualizam automaticamente, como gráficos que mudam em tempo real.
O que é 'Remotion'?
Remotion é uma ferramenta que permite criar vídeos usando código de programação, como se estivesse desenhando o vídeo com instruções.
Posso usar imagens externas?
Não é recomendado, pois o vídeo precisa ser criado apenas com as informações que você já colocou no código para funcionar corretamente em qualquer lugar.
Detalhes
Descrição original do autor
Use this plugin when the user wants a "Data Rollup Frame" HyperFrames motion video — A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync.
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #620
- 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