
Renderizado por este Skill
Card de música tocando v1.0.0
Um card de "tocando agora" no estilo Spotify com a sua arte, o nome da faixa e uma barra de progresso andando, pronto para sobrepor a um vídeo vertical.
- Formato
- Formato curto · 9:16
- Duração
- 0:05
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 uma sobreposição de 5 segundos em 9:16. Um card de música com efeito fosco sobe com uma arte quadrada grande, o título da faixa, uma linha de artista e uma barra de progresso que avança, e então some. Faixa, artista e arte são editados no HTML; o fundo é transparente para sobrepor.
Atualizado em 3 de nov. de 2026
O que você recebe
- Uma sobreposição de card de 5 segundos em 1080×1920 com fundo transparente
- Arte, título, artista e uma barra de progresso animada
- Instruções para sobrepor às suas imagens
Ideal para
- Trilhas sonoras de campanha e playlists
- Divulgação de podcasts e músicas
- Stories e Reels
Não é para
- Vídeos horizontais
- Videoclipes longos
Sobre este Skill
/spotify-card Faça um card de música tocando para a faixa da campanha da Aurelle, "Wear the Light", com o mix de pulseiras como arte, sobre a nossa cena das pulseiras.
Cards de música dizem "esta é a trilha sonora" na hora. O Card de música tocando coloca a faixa da sua campanha, uma playlist ou um episódio de podcast num card limpo e animado, com a sua arte, para que um vídeo vertical dê crédito ou divulgue o som.
Como funciona
- Peça: diga ao seu agente o título da faixa, a linha de artista, a arte e a cena sobre a qual ele vai ficar.
- 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
- Use uma arte quadrada com pelo menos 800 px de largura.
- Mantenha o título com poucas palavras; ele aparece em tamanho grande.
- O card tem fundo transparente, então renderize-o com canal alfa e coloque-o sobre as suas próprias imagens ou foto; o SKILL.md mostra os dois comandos.
- Nossa amostra troca o logo da plataforma por um rótulo simples "Now playing".
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
- O título de uma faixa ou episódio, uma linha de artista, uma arte quadrada e a cena para colocá-lo por cima.
- 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 mudar as cores?
Sim. As cores do card e do texto são CSS simples no HTML.
Aparece o logo do Spotify?
O pacote mantém o pequeno logo original; nossa amostra o troca por um rótulo "Now playing", e o seu agente pode fazer o mesmo.
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 Aurelle.







