Grátis
Maison Vey · 16:9
Renderizado por este Skill
Card de dado com progresso v1.0.0
Um dado grande vai contando ao lado de um rótulo, uma trilha fina de progresso se preenche até o valor e uma legenda aparece.
Ainda sem avaliações 0 downloads
- Formato
- Vídeo · 16:9
- Duração
- 0:07
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 um momento de dado de 7 segundos. Um numeral grande conta até o seu valor com um sufixo como %, um rótulo fica ao lado, uma trilha fina de destaque se preenche na proporção do valor sobre o máximo e uma legenda curta aparece embaixo. Valor, sufixo, máximo, rótulo, legenda e cores são definidos numa pequena configuração no HTML; o fundo é transparente.
Atualizado em 3 de nov. de 2026
O que você recebe
- Um dado de 7 segundos em 1920×1080 com fundo transparente
- Um numeral com contagem, um rótulo, uma trilha de progresso e uma legenda
- Um pequeno bloco de configuração para os valores
Ideal para
- Resultados de pesquisas e avaliações
- Marcos e metas
- Argumentos de produto com um número
Não é para
- Vários números ao mesmo tempo
- Números sem contexto
Sobre este Skill
Você diz
/mk-progress-stat Faça um dado com progresso: 94% "Would wear it again", legenda "Maison Vey Ambre Nuit, blind test of 200 people", sobre a nossa cena do perfume.
Um número forte pode sustentar um anúncio inteiro. O Card de dado com progresso faz a contagem, mostra o quanto ele chega perto do máximo e dá a ele um rótulo e uma legenda, limpo o bastante para ficar sobre uma cena de produto.
Como funciona
- Peça: diga ao seu agente o número, o sufixo e o máximo, um rótulo curto e uma legenda.
- 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
- Escolha um número com significado claro, como 94% usariam de novo.
- Mantenha o rótulo em três ou quatro palavras.
- 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.
- Use números reais que você consiga comprovar.
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
- Um número, o máximo dele, um rótulo curto e uma legenda.
- 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
O número pode ser algo além de uma porcentagem?
Sim. Defina o sufixo como K, x ou nada e ajuste o máximo de acordo.
Ele pode ficar sobre um fundo liso?
Sim. Ele tem estilos de texto claro e escuro para fundos lisos ou imagens.
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, a Maison Vey.
