Grátis
Solenne · 16:9
Renderizado por este Skill
Notificações em vidro líquido v1.0.0
Cards de notificação em vidro líquido fosco flutuam sobre um fundo de aurora em movimento, um com progresso ao vivo e outro com uma resposta.
Ainda sem avaliações 0 downloads
- Formato
- Vídeo · 16:9
- Duração
- 0:08
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 8 segundos de interface em vidro líquido. Dois cards de notificação foscos entram flutuando sobre um shader de aurora em movimento: um mostra uma tarefa em andamento que é concluída, o outro uma mensagem com os pontinhos de digitação e os chips Responder e Marcar como lida, com o seu logo no canto. Os textos, as mensagens de status e o logo são editados no HTML.
Atualizado em 3 de nov. de 2026
O que você recebe
- Um MP4 de 8 segundos em 1920×1080 com fundo de aurora ao vivo
- Dois cards de notificação foscos com estados de progresso e de resposta
- O seu logo no canto
Ideal para
- Lançamentos de apps e revelações de recursos
- Vídeos de produto com cara de sistema operacional moderno
- Fundos para slides de keynote
Não é para
- Fundos lisos ou nas cores da marca
- Mensagens longas
Sobre este Skill
Você diz
/liquid-glass-notification Faça notificações em vidro líquido para a Solenne: um card "Sunset scene" diminuindo as luzes da sala que termina com "Evening wind-down is on", e uma mensagem da Ines pedindo para aquecer o quarto.
O vidro líquido é a cara dos sistemas operacionais de hoje: fosco, refrativo, vivo. As Notificações em vidro líquido colocam as notificações do seu produto nesse estilo sobre uma aurora em movimento, para que uma atualização, um pedido ou uma mensagem pareçam nativos e premium ao mesmo tempo.
Como funciona
- Peça: diga ao seu agente o que o primeiro card está fazendo e o que ele diz ao terminar, a mensagem do segundo card e o seu logo.
- 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 um logo branco; ele fica sobre o fundo colorido.
- Escreva o card de progresso como algo acontecendo agora.
- Mantenha cada card em uma linha curta.
- 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
- Dois textos curtos de notificação, um status final e um logo branco.
- 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 da aurora?
As cores do shader são definidas no script; seu agente pode ajustá-las à sua paleta.
O efeito de vidro é real ou uma imagem?
Real: ele é renderizado ao vivo com uma biblioteca de vidro líquido, então refrata o fundo em movimento.
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 Solenne.
