video-template-frame-nyt-graph
Faz seu agente criar um vídeo com um gráfico animado no estilo editorial. É bom para apresentar dados de forma clara e visualmente atraente.
O que ela faz
Este modelo cria vídeos curtos com gráficos animados, parecidos com os do jornal The New York Times. Ele transforma dados em um vídeo com visual de editorial de notícias.
Quando usar
- ✓Quando você precisa mostrar uma estatística importante de forma visual.
- ✓Para ilustrar uma linha de dados que muda ao longo do tempo.
- ✓Ao criar um vídeo com estilo de reportagem para apresentar informações.
Exemplo do que pedir para a IA
“Crie um vídeo de gráfico estilo NYT mostrando o aumento de vendas no último trimestre.”
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
O modelo usa código de computador (HTML, CSS, GSAP) para criar o gráfico animado. Você só precisa trocar os textos e números de exemplo pelos seus dados.
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-nyt-graphOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/nexu-io/open-design/main/plugins/_official/video-templates/frame-nyt-graph/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.
Gráfico NYT
Gráfico de dados animado em estilo editorial de impressão
O que este modelo é
Uma composição de movimento HTML + CSS + GSAP pronta para HyperFrames, empacotada sob source/. Ele renderiza deterministicamente para MP4 / WEBM em 16:9, padrão de 15s, 30fps.
Ideal para: Revelação de estatísticas no estilo de notícias · Gráfico de linha ao longo do tempo · Ponto de dados editorial
Fluxo de trabalho
- Leia
source/index.htmlpara 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 autônoma sob
source/; não introduza ativos de rede externos que quebrariam uma renderização sem cabeça. - Renderize para MP4 através do renderizador html-video / HyperFrames.
Atribuição
Fonte: html-video templates/frame-nyt-graph (licença Apache-2.0). Fork do heygen-com / Hyperframes — https://github.com/heygen-com/hyperframes/tree/main/registry/examples/nyt-graph.
Perguntas frequentes
O que é 'HyperFrames'?
HyperFrames é uma ferramenta que ajuda a criar vídeos animados a partir de código, como este modelo.
Posso mudar as cores e o estilo?
O modelo foi feito para manter o estilo visual do NYT. Mudanças significativas podem exigir conhecimento em código.
Qual o tamanho do vídeo?
O vídeo padrão tem 15 segundos, em formato 16:9 e 30 quadros por segundo.
Detalhes
Descrição original do autor
Use this plugin when the user wants a "NYT Graph" HyperFrames motion video — Animated data chart in print editorial style
repo: nexu-io/open-design
Popularidade
- Estrelas no GitHub
- 101 mil
- Posição no ranking
- #628
- 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