Grátis
Halden Solace · 16:9
Renderizado por este Skill
Gráfico de barras e linha v1.0.0
Um gráfico editorial de barras e linha se monta mês a mês: as barras sobem, uma linha se desenha por cima delas e cada valor vai contando.
Ainda sem avaliações 0 downloads
- Formato
- Vídeo · 16:9
- Duração
- 0:15
Grátis Grátis com uma conta
Cole isto no seu agente. Ele conecta a CLI se necessário e instala o Skill.
Um bloco gratuito do HyperFrames para 15 segundos de storytelling com dados em estilo de jornal. Linhas de grade e rótulos dos meses aparecem, as barras sobem uma a uma com seus valores, e então uma linha se desenha por cima delas com seus próprios rótulos de porcentagem, sob um título serifado, um subtítulo, uma legenda e uma linha de fonte. Meses, as duas séries de dados, escalas, rótulos e títulos são editados no HTML.
Atualizado em 3 de nov. de 2026
O que você recebe
- Um gráfico de 15 segundos em 1920×1080 com fundo transparente
- Barras, uma linha e rótulos de valores que se montam em ordem
- Um título serifado, legenda e linha de fonte
Ideal para
- Histórias de resultados e de crescimento
- Atualizações para investidores e conselho
- Vídeos explicativos e relatórios
Não é para
- Mais de seis períodos
- Dashboards densos
Sobre este Skill
Você diz
/data-chart Faça um gráfico de barras e linha: "Halden Solace: pairs sold vs. repeat buyers", de junho a novembro, pares vendidos de 9 a 23 mil e clientes recorrentes de 24% a 44%.
Dois números que andam juntos contam uma história: vendas e clientes recorrentes, tráfego e cadastros, receita e margem. O Gráfico de barras e linha mostra os dois num gráfico editorial e calmo que se monta sozinho, para que o público leia a tendência antes que a narração a explique.
Como funciona
- Peça: diga ao seu agente seis meses, os valores das barras e da linha, as unidades e um título.
- Preencha: ele escreve seus textos e suas cores nas variáveis do bloco, mantendo os textos perto do tamanho para o qual o layout foi feito.
- Renderize: ele renderiza um rascunho com
npx hyperframes render, confere alguns quadros e renderiza o MP4 final. - Reaproveite: as variáveis ficam num pequeno arquivo JSON, então a próxima versão é só mais uma renderização.
Dicas
- Mantenha a escala da linha acima da das barras para que os rótulos dela nunca se sobreponham às barras.
- Indique as unidades no subtítulo e na legenda.
- O fundo é transparente, então renderize com canal alfa e coloque sobre as suas próprias imagens, uma foto ou uma cor lisa; o SKILL.md mostra os dois comandos.
- Ele não tem variáveis: seu agente edita os textos e os números direto no HTML, seguindo o SKILL.md.
Código aberto
Este é um bloco do registro do HyperFrames, feito pela HeyGen e pelos colaboradores do HyperFrames (heygen-com/hyperframes) e compartilhado sob a Apache License 2.0. O download é o bloco com seus arquivos e um SKILL.md escrito pela Reelity, para que seu agente saiba preenchê-lo e renderizá-lo; o HyperFrames em si roda pelo npm.
O que você precisa antes de começar
- Você fornece
- Seis períodos de dados para duas métricas, as unidades e um título.
- Dependências
- Node.js 22 ou superior — obrigatório · FFmpeg — obrigatório
- Custos externos
- Nenhum. O HyperFrames é gratuito, de código aberto e renderiza no seu próprio computador.
- Último teste
- v1.0.0 —
Avaliações de usuários
Ainda não há avaliações. Instale o Skill e seja o primeiro a avaliar.
Perguntas frequentes
Posso usar outros períodos além de meses?
Sim. Os rótulos são uma lista no script; trimestres, anos ou semanas funcionam.
Como evito que os rótulos se sobreponham?
Defina o máximo da linha menor que o máximo das barras para que a linha fique acima delas; a nossa amostra faz isso.
Por que é grátis?
É um bloco de código aberto do HyperFrames, da HeyGen e dos colaboradores do HyperFrames. Nós o listamos como está, com um SKILL.md para que seu agente possa usá-lo e uma amostra feita com uma das nossas marcas da casa, o Halden Solace.
