Todos os Skills de vídeo Premium em um só plano. Cancele quando quiser.Ver planos
Halden Solace · 16:9

Renderizado por este Skill

Widgets em vidro líquido v1.0.0

Widgets de dados em vidro líquido fosco contam para cima, um painel de destaque mostra o progresso e chips de status acendem sobre uma aurora em movimento.

Ainda sem avaliações 0 downloads
Formato
Vídeo · 16:9
Duração
0:08

Grátis Grátis com uma conta

Entre para baixar

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 dashboard em vidro líquido. Três widgets foscos contam uma temperatura, um nível de bateria e um anel de passos, um painel de destaque com o seu logo mostra um título, uma frase e um status que é concluído, e três chips de status acendem, tudo sobre um shader de aurora em movimento. Os textos, os números 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
  • Widgets de dados com contagem, um painel de destaque e chips de status
  • O seu logo no painel

Ideal para

  • Apps de fitness, saúde e dispositivos inteligentes
  • Dashboards e recursos de dados
  • B-roll de lançamento de produto

Não é para

  • Fundos lisos ou nas cores da marca
  • Mais de três dados

Sobre este Skill

Você diz

/liquid-glass-widgets Faça widgets em vidro líquido para uma corrida com o Halden: temperatura, bateria do relógio e 8.2K passos, com um painel "Long run saved: 18.4 km at an easy pace in the Halden Solace" que termina em "Run saved".

Widgets são como as pessoas dão uma olhada rápida no que importa. Os Widgets em vidro líquido montam um pequeno dashboard no estilo de vidro líquido fosco, com números subindo e um painel que anuncia uma tarefa concluída, para que um app de fitness, um dispositivo inteligente ou um serviço mostre seus dados com beleza.

Como funciona

  1. Peça: diga ao seu agente os três valores dos widgets, o título e a frase do painel, o status final e o seu logo.
  2. 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.
  3. Renderize: ele renderiza um rascunho com npx hyperframes render, confere alguns quadros e renderiza o MP4 final.
  4. Reaproveite: as variáveis ficam num pequeno arquivo JSON, então a próxima versão é só mais uma renderização.

Dicas

  • Escolha três números que contem uma mesma história, como temperatura, bateria e passos numa corrida.
  • Mantenha a frase do painel em uns 70 caracteres.
  • Use um logo branco.
  • 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
Três dados, um título e uma frase curtos para o painel, 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

Os widgets podem mostrar outros dados?

Sim. Rótulos, valores e unidades ficam no HTML; a animação de contagem funciona com qualquer número.

Tem o mesmo visual das Notificações em vidro líquido?

Sim, a mesma aurora e o mesmo vidro, então os dois funcionam muito bem juntos na edição.

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.

Guias

How to make liquid glass notifications for an app videoFrosted, refractive liquid glass is the look of current operating systems. How to show your app's notifications in that style over a flowing aurora, free, with the Liquid Glass Notifications block.How to show your app's stats as liquid glass widgetsGlanceable widgets are how people read their data. How to animate a small liquid-glass dashboard with counting stats, free, with the Liquid Glass Widgets block.

Skills parecidos

Ver todos