
Renderizado por este Skill
Tela inicial em celular 3D v1.0.0
Um celular 3D gira num estúdio suave com uma tela inicial de vidro líquido, notificações chegando e o seu web app na tela.
- 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 b-roll de dispositivo em 3D. Um modelo 3D de celular gira sobre uma mesa sob um papel de parede em shader; a tela inicial de vidro líquido mostra ícones de apps, widgets e notificações entrando, e depois abre uma página web com uma frase de destaque e cards. Todo o conteúdo da tela (ícones, rótulos, notificações, a página) é HTML que você pode editar; o celular e o notebook são modelos 3D.
Atualizado em 4 de nov. de 2026
O que você recebe
- Um MP4 de 15 segundos em 1920×1080 com um celular 3D
- Uma tela inicial de vidro líquido, notificações e a sua página na tela
- HTML editável para cada pixel da tela
Ideal para
- Filmes de lançamento de apps e b-roll
- Vídeos de destaque para landing pages
- Demos para investidores e keynotes
Não é para
- Mostrar uma gravação real do seu app
- Formatos só na vertical
Sobre este Skill
/ios26-liquid-glass Faça uma tela inicial em celular 3D para a Solenne: notificações sobre a cena da noite e o relatório de energia, e a página da Solenne "Your home, on cue".
B-roll de dispositivo faz qualquer app parecer lançado. A Tela inicial em celular 3D renderiza um celular 3D de verdade com uma tela inicial atual de vidro líquido, para que as suas notificações apareçam e o seu web app se abra nele, sob luz de estúdio, sem gravação e sem artista 3D.
Como funciona
- Peça: diga ao seu agente as notificações, os nomes dos apps e o conteúdo da página que o celular deve mostrar.
- 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
- Troque os ícones e nomes de apps padrão pelos seus ou por neutros; a nossa amostra faz isso.
- Mantenha cada notificação em uma linha curta.
- Use as cores reais do seu produto na página.
- Ele não tem variáveis: seu agente edita o texto 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
- As notificações, os nomes dos apps e o texto da página que você quer na tela, e as suas cores.
- 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
Ele vem com ícones de apps reais?
O original inclui ícones de apps conhecidos como placeholders. Troque pelos seus ou por neutros; a nossa amostra usa ícones neutros gerados.
Posso colocar um print na tela?
Sim. A tela é HTML, então uma imagem do seu app pode substituir a página.
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.






