# Templates de Animação HyperFrames Grátis em HTML e GSAP

Tenha 65 modelos de vídeo HyperFrames para chat IA, dispositivos, títulos e demos. Personalize HTML e GSAP ou edite no Subclip.

Canonical URL: https://www.subclip.app/pt/motion-graphics-templates/hyperframes

Os templates HyperFrames são motion graphics escritos em HTML simples com uma timeline GSAP pausada. Esta página é para desenvolvedores e usuários de agentes de IA que querem cenas de vídeo que dá para ler e editar como uma página web. Ela reúne posts de redes sociais, notificações, conversas de chat, mapas regionais, gráficos, lower thirds, anotações desenhadas à mão e fluxos de interface, todos com variáveis editáveis.

## HTML com uma timeline GSAP pausada

Cada template HyperFrames é um documento HTML. O layout é HTML e CSS, e o movimento é uma timeline GSAP que começa pausada. Em vez de deixar o navegador reproduzir em tempo real, o renderizador leva a timeline a cada frame e o captura. Todo frame é determinístico, então a renderização fica igual à prévia.

Os valores editáveis ficam expostos como variáveis: nome, @ e contador nos overlays de seguir, título, subtítulo e valores nos mapas, períodos e séries no Bar Chart Race, e cores de destaque em muitos outros. Mude uma variável e a cena é redesenhada com ela. Como o código-fonte é HTML comum, você também pode lê-lo, mudar o estilo com CSS ou adicionar elementos como faria em uma página web.

Muitos templates daqui são overlays. Instagram Follow, TikTok Follow, YouTube Lower Third, macOS Notification e Neon Border mantêm o fundo transparente para ficar por cima das suas imagens.

## O que o conjunto HyperFrames cobre

As animações para redes sociais são um ponto forte. iOS Notification empilha quatro banners em um quadro vertical, X Post Card e Reddit Post Card animam uma curtida ou um upvote com o contador subindo, Comment Cards digita dois comentários, e ChatGPT Exchange e Claude Exchange reproduzem uma conversa roteirizada com um assistente em 9:16.

Para dados e lugares há os mapas dos EUA, da França, da Espanha e da Índia com valores por região editáveis, US Flow Map com arcos ponderados entre cidades, Bar Chart Race, Minimal Line Graph, Animated Bar e Data Chart. Entre as peças desenhadas à mão estão Hand Drawn Scribble, Squiggle Marks, Whiteboard Bulb e Stitched Text Draw. Os fluxos de interface incluem Settings Toggle, Skeleton Reveal, Swipe Rail e Parallax Zoom.

## Usando templates HyperFrames no Subclip

Todos os templates HyperFrames são gratuitos e já vêm instalados no Subclip, o editor de vídeo com IA para desktop no Mac e no Windows. Coloque um na timeline sobre suas imagens e peça ao agente de IA para alterá-lo: trocar os valores do mapa pelas suas vendas por estado, colocar o seu @ no overlay de seguir, ou pôr o nome do seu canal e o número de inscritos no lower third. O agente edita as variáveis por você, e você exporta o vídeo quando estiver pronto.

## Pegando o HTML para Claude ou Codex

Todos os templates HyperFrames atuais têm um pacote de código, disponível após um login gratuito. Copie o código com um prompt para levar o HTML completo e um prompt pronto para o agente à sua área de transferência, depois cole no Claude ou no Codex e diga o que mudar. O prompt lista as variáveis, então o agente sabe onde entram seus textos, cores e dados.

Ou baixe o zip: index.html, props.json com os valores padrão das variáveis, um README sobre como rodar no player HyperFrames, e os arquivos AGENTS.md e CLAUDE.md, que descrevem o que é editável. Isso dá a um agente de programação contexto suficiente para mudar o estilo de um template, adicionar uma cena ou gerar várias versões com dados diferentes.

## 65 templates

- [Subclip Scenic Reel Composer](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-scenic-reel-composer) (HyperFrames, Entrada de chat com IA): Anime um prompt de vidro e uma galeria giratória neste modelo de vídeo.
- [Subclip Momentum Growth Headline](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-momentum-growth-headline) (HyperFrames, Títulos): Anime um título digitado junto a um gráfico animado neste modelo de vídeo.
- [Subclip Guided Word Spotlight](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-guided-word-spotlight) (HyperFrames, Títulos): Anime texto palavra por palavra com câmera móvel neste modelo de vídeo.
- [Subclip Hinged Laptop Showcase](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-hinged-laptop-showcase) (HyperFrames, Telas e dispositivos): Anime um notebook articulado com zoom na tela neste modelo de vídeo.
- [Subclip Aurora Brand Signature](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-aurora-brand-signature) (HyperFrames, Títulos): Anime um logotipo e nome sobre degradês suaves neste modelo de vídeo.
- [Subclip Creative Brief Launcher](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-creative-brief-launcher) (HyperFrames, Entrada de chat com IA): Anime um briefing digitado com confirmação de envio neste modelo de vídeo.
- [Subclip Panorama Device Gallery](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-panorama-device-gallery) (HyperFrames, Telas e dispositivos): Anime quatro celulares em perspectiva e um título neste modelo de vídeo.
- [Subclip Mobile Action Spotlight](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-mobile-action-spotlight) (HyperFrames, Telas e dispositivos): Anime um botão móvel em destaque e títulos finais neste modelo de vídeo.
- [Subclip Pocket AI Composer](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-pocket-ai-composer) (HyperFrames, Entrada de chat com IA): Anime um chat móvel com zoom no botão de envio neste modelo de vídeo.
- [Subclip Release-to-Video Assistant](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-release-to-video-assistant) (HyperFrames, Entrada de chat com IA): Anime uma resposta de IA com uma tabela de resultados neste modelo de vídeo.
- [Subclip Connected Creative Workspace](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-connected-creative-workspace) (HyperFrames, Entrada de chat com IA): Anime conexões de arquivos e um espaço criativo neste modelo de vídeo.
- [Subclip Intent Search Animation](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-intent-search-animation) (HyperFrames, Entrada de chat com IA): Anime uma busca selecionada e digitada novamente neste modelo de vídeo.
- [Subclip Production Progress Tracker](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/subclip-production-progress-tracker) (HyperFrames, Entrada de chat com IA): Anime uma lista de tarefas com progresso e conclusão neste modelo de vídeo.
- [iOS Notification](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/notification-cascade) (HyperFrames, Redes e chat): Um overlay vertical de notificações em que quatro banners no estilo iPhone se empilham um após o outro e depois saem para dar lugar a um card final com título e logo.
- [Instant Carousel](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/share-sheet-carousel) (HyperFrames, Redes e chat): Um carrossel de imagens vertical que alterna quatro fotos dentro de um card branco arredondado, com uma cópia suavemente desfocada da imagem atual preenchendo o fundo.
- [macOS Notification](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/macos-notification) (HyperFrames, Redes e chat): Um overlay widescreen em que banners de notificação no estilo macOS chegam um de cada vez no canto superior direito e se empilham em uma coluna.
- [Instagram Follow](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/instagram-follow) (HyperFrames, Redes e chat): Um overlay vertical transparente com uma pílula de perfil compacta cujo botão Seguir muda para Seguindo, feito para lembrar o público de seguir a sua conta.
- [TikTok Follow](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/tiktok-follow) (HyperFrames, Redes e chat): Um overlay de perfil transparente em 9:16 em que um botão Seguir vermelho-rosado salta para o estado Seguindo com um visto.
- [X Post Card](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/x-post) (HyperFrames, Redes e chat): Um card widescreen de post social em tema escuro que mostra perfil, texto e linha de ações, e depois anima uma curtida com o contador subindo.
- [Reddit Post Card](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/reddit-post) (HyperFrames, Redes e chat): Um card widescreen de post de comunidade com linha do subreddit, título em negrito e texto, terminando com um upvote que salta e aumenta a pontuação.
- [Thread Message](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/thread-message-stack) (HyperFrames, Redes e chat): Uma conversa de texto em widescreen em que balões cinza recebidos e azuis enviados aparecem um após o outro sobre um campo de cor suave e desfocado.
- [Comment Cards](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/yt-comment-card) (HyperFrames, Redes e chat): Um overlay widescreen em que dois comentários aparecem em sequência, cada um com avatar de iniciais, nome de usuário, tempo, texto digitado e linha de reações.
- [YouTube Lower Third](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/yt-lower-third) (HyperFrames, Legendas inferiores e CTAs): Um lower third widescreen transparente com o avatar e o nome do canal ao lado de um botão Inscrever-se que salta para o estado Inscrito.
- [Grid Pixelate](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/grid-pixelate) (HyperFrames, Transições): Uma transição em grade de pixels em que blocos quadrados crescem até cobrir o quadro inteiro e depois diminuem, deixando um momento limpo para cortar entre cenas.
- [Hand Drawn Scribble](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/hw-callout-circle) (HyperFrames, Anotações): Um destaque desenhado à mão em que uma elipse branca tremida circula um assunto, hachuras de marcador a preenchem e um conector curvo leva a um rótulo manuscrito.
- [Squiggle Marks](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/hw-underline) (HyperFrames, Anotações): Uma anotação de texto manuscrita em que três linhas são marcadas uma a uma com um sublinhado ondulado, um tachado duplo e um colchete curvo.
- [Multiplayer Cursor](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/multiplayer-cursors) (HyperFrames, Cliques): Uma animação de colaboração em que de dois a seis cursores coloridos com etiquetas de nome deslizam por trajetos definidos e se reúnem em volta de um anel de foco brilhante.
- [Parallax Device Dive](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/parallax-device-dive) (HyperFrames, Telas e dispositivos): Uma animação de mockup de celular em que um aparelho mostrando um dashboard sobe, segura e depois aproxima até ocupar o quadro enquanto as camadas da interface se separam.
- [Parallax Unzoom](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/parallax-unzoom) (HyperFrames, Títulos): Uma transição de recuo em que um card em tela cheia diminui até o centro de uma grade de três por três enquanto oito vizinhos coloridos entram em volta dele.
- [Parallax Zoom](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/parallax-zoom) (HyperFrames, Títulos): Uma transição de zoom que começa em uma grade de três por três de cards coloridos e avança no card central até ele ocupar o quadro.
- [Settings Toggle](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/settings-toggle-flow) (HyperFrames, Interface): Uma animação de painel de configurações em que três linhas com rótulo aparecem em um card branco e seus botões deslizam para ligado ou desligado.
- [Store Badge](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/store-badge-lockup) (HyperFrames, Legendas inferiores e CTAs): Um card final de download de app em que um título grande aparece primeiro, seguido de selos no estilo App Store e Google Play logo abaixo.
- [Neon Border](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/lt-neon-border) (HyperFrames, Legendas inferiores e CTAs): Um lower third transparente com um card escuro de nome cuja borda é percorrida por dois arcos de neon opostos com brilho suave.
- [Skeleton Reveal](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/skeleton-reveal) (HyperFrames, Interface): Uma animação curta de carregamento em que um placeholder skeleton com brilho se transforma em um card com um nome em negrito e uma linha de detalhe.
- [Staggered Fade Up](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/staggered-fade-up) (HyperFrames, Títulos): Uma revelação simples de texto palavra por palavra em que cada palavra aparece, cresce levemente e desliza uma curta distância até o lugar final.
- [Text Stagger](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/text-stagger) (HyperFrames, Títulos): Um título de uma linha que sobe e cresce até a posição de forma escalonada e depois recebe uma única passada de brilho colorido sobre o texto.
- [Intro Video](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/intro-video) (HyperFrames, Demos de produtos): Uma intro roteirizada de demo de produto que abre com texto cinético, digita um prompt em um campo de assistente, clica em enviar e revela um card de projeto.
- [ChatGPT Exchange](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/chatgpt-exchange) (HyperFrames, Entrada de chat com IA): Uma animação de chat vertical no modo escuro em que uma pergunta é digitada, a resposta chega com uma tabela de fluxo de trabalho de quatro linhas e a tela rola para a leitura.
- [Claude Exchange](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/claude-exchange) (HyperFrames, Entrada de chat com IA): Uma animação de chat vertical em tom escuro e quente em que uma pergunta digitada leva a etapas de planejamento e busca e a uma resposta longa em serifa que aparece e rola.
- [Gallery Tunnel](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/gallery-tunnel) (HyperFrames, Demos de produtos): Um túnel em perspectiva em que painéis de cores vivas e linhas finas de grade revestem um corredor que avança em direção a um ponto de fuga central.
- [Chat Thread 2](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/chat-thread-2) (HyperFrames, Redes e chat): Uma conversa de texto vertical dentro de um celular, com respostas digitadas, prévia de link, reações com emoji e confirmações de leitura, terminando em um card final.
- [Minimal Line Graph](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/minimal-line-graph) (HyperFrames, Gráficos): Um gráfico de linha limpo com duas séries sobre fundo transparente, com rótulos de valor em cada ponto, meses na base e uma pequena legenda.
- [Spain Map](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/spain-map) (HyperFrames, Mapas): Um mapa animado das regiões da Espanha colorido por valor, incluindo as ilhas Baleares e Canárias, com título, subtítulo e legenda de cores.
- [India Map](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/india-map) (HyperFrames, Mapas): Um mapa da Índia de 12 segundos que colore cada estado e território da união pelo valor, com rótulos, título, subtítulo e uma legenda de Baixo a Alto.
- [France Map](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/france-map) (HyperFrames, Mapas): Um mapa coroplético da França metropolitana com cada região colorida pelos seus valores, nomes das regiões, título, subtítulo e escala de cores.
- [US Map](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/us-map) (HyperFrames, Mapas): Um mapa dos estados dos EUA que revela as regiões em sequência e colore cada estado pelo valor, com Alasca, Havaí, nomes dos estados e legenda de cores.
- [US Flow Map](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/us-flow-map) (HyperFrames, Mapas): Um mapa escuro dos EUA em que arcos azuis curvos ligam grandes cidades e pequenos pontos os percorrem, mostrando fluxos de cidade para cidade.
- [ChatGPT Chat](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/ai-chat-reveal) (HyperFrames, Entrada de chat com IA): Uma animação de chat com assistente em 9:16, com pergunta digitada, resposta em fluxo com tópicos e um card final com chamada para ação.
- [Animated Bar](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/animated-bar) (HyperFrames, Gráficos): Um card de gráfico monocromático e compacto com barras que crescem, uma curva de tendência suave e um grande percentual em destaque no canto superior direito.
- [Bar Chart Race](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/bar-chart-race) (HyperFrames, Gráficos): Um gráfico de barras horizontais ranqueadas que avança pelos períodos, com ultrapassagens, líder destacada, eixo que se ajusta e contador de período.
- [Data Chart](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/data-chart) (HyperFrames, Gráficos): Um gráfico combinado em estilo editorial que junta barras de faturamento mensal a uma linha de taxa de conversão, com rótulos de valor, legenda e nota de fonte.
- [Camera Follow Captions](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/caption-camera-follow) (HyperFrames, Títulos): Legendas cinéticas em que cada nova palavra entra em um bloco crescente de maiúsculas em negrito enquanto a câmera recua para revelar a frase inteira.
- [Whiteboard Bulb](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/whiteboard-bulb) (HyperFrames, Anotações): Um esboço de lâmpada no estilo quadro branco desenhado traço a traço por uma caneta em movimento, com uma marca colorida de destaque e uma legenda embaixo.
- [Whiteboard Rocket](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/whiteboard-rocket) (HyperFrames, Anotações): Um esboço de foguete desenhado a caneta, com aletas, linhas de propulsão e uma janela colorida, seguido de uma legenda curta de lançamento sobre fundo de papel.
- [Chat Thread](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/chat-thread) (HyperFrames, Redes e chat): Uma conversa de mensagens em 9:16 no modo escuro, com balões recebidos e enviados, pontinhos de digitação, um card de prévia de link e confirmações de leitura.
- [CTA Lockup](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/cta-lockup) (HyperFrames, Legendas inferiores e CTAs): Uma tela final de chamada para ação com um título grande, um botão em formato de pílula e uma pequena linha de texto de apoio sobre preto.
- [Notes Typing](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/notes-typing) (HyperFrames, Interface): Uma animação de notas no celular em 9:16 que digita um título e sete linhas com teclado na tela e termina em um card de checklist com a sua marca.
- [Outline Draw](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/outline-draw) (HyperFrames, Anotações): Um contorno fino com cantos arredondados que se desenha no sentido horário com o centro transparente, usado para emoldurar e destacar parte do seu vídeo.
- [Oversized Cursor](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/oversized-cursor) (HyperFrames, Cliques): Um cursor de seta grande que vai até um botão, clica para ele reagir com um visto e depois sai do quadro.
- [Social Proof Card](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/social-proof-card) (HyperFrames, Prova social): Um card final cor de creme com nome da marca, fileira de cinco estrelas, frase de cliente, três ícones de recursos e um botão de chamada para ação.
- [Stitched Text Draw](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/stitched-text-draw) (HyperFrames, Anotações): Uma palavra em maiúsculas desenhada como pontos de costura tracejados, com furos de agulha e uma agulha em movimento, sobre fundo preto.
- [Swipe Rail](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/swipe-rail) (HyperFrames, Transições): Um trilho horizontal de cards numerados que desliza com impulso e encaixa um card no centro sobre um fundo azul-marinho escuro.
- [Ask Subclip](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/ask-subclip) (HyperFrames, Entrada de chat com IA): Uma cena promocional para um editor de vídeo com IA em que um pedido é digitado em uma caixa de prompt sob um título, seguido de um resultado e uma frase final.
- [Build console](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/build-console) (HyperFrames, Interface): Uma janela de terminal escura que executa um comando de renderização em várias etapas, com marcas de concluído, barra de progresso e um selo de pronto.
- [Spatial deck](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/spatial-deck) (HyperFrames, Demos de produtos): Uma sequência de cards numerados em verde-azulado que percorrem uma perspectiva 3D em camadas, cada um com o título de uma etapa e uma descrição curta.

## Mais em Templates de Animação HyperFrames Grátis em HTML e GSAP

- [HyperFrames: Títulos](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/text-animations)
- [HyperFrames: Telas e dispositivos](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/screen-device-animations)
- [HyperFrames: Gráficos](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/animated-charts)
- [HyperFrames: Entrada de chat com IA](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/ai-chat-animations)
- [HyperFrames: Mapas](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/animated-maps)
- [HyperFrames: Redes e chat](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/social-media-animations)
- [HyperFrames: Legendas inferiores e CTAs](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/lower-thirds)
- [HyperFrames: Anotações](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/hand-drawn-annotations)
- [HyperFrames: Interface](https://www.subclip.app/pt/motion-graphics-templates/hyperframes/ui-animations)