HyperFrames no OpenDesign: como gerar imagem, motion graphics e vídeo a partir da conversa do projeto

Quem olhou o OpenDesign de longe jurou que a brincadeira parava na tela estática

Não para

A mesma conversa de projeto que cospe um protótipo, um dashboard ou um deck também entrega imagem em PNG, motion graphics HyperFrames e vídeo em MP4

E o detalhe que muda o jogo: o render acontece na sua máquina, com o agente de código que você já usa, sem render em nuvem e sem taxa por clipe

Bora ver como as duas pontas se encaixam?

O que é o HyperFrames e o que ele tem a ver com o OpenDesign

O HyperFrames é um framework open source que pega HTML, CSS, mídia e animações com seek determinístico e transforma em vídeo MP4

E o que é esse tal de seek determinístico? É a garantia de que, ao posicionar a timeline em um ponto qualquer, o quadro que aparece é sempre o mesmo

Isso importa MUITO aqui, porque o render grava quadro a quadro: se a animação depender do relógio da máquina, o vídeo sai torto

O framework pode ser usado de três jeitos: via CLI local, via skills dentro de agentes de código ou como motor de render por trás de fluxos hospedados

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 114 aulas
• 4 projetos
• 9h 18min

Conhecer formação

Quem mantém e sob qual licença:

O repositório fica na organização heygen-com, e o README do projeto diz que ele foi originado pela HeyGen e construído para a comunidade

A licença é Apache 2.0, sem créditos de render obrigatórios

E o render local não consome créditos da HeyGen

O pacote traz 19 skills que os agentes carregam sob demanda, com o diretório /hyperframes funcionando como roteador e mapa de capacidades: é ele que escolhe o fluxo quando chega aquele pedido genérico do tipo "faz um vídeo pra mim"

As skills funcionam com agentes que suportam skills: Claude Code, Cursor, Gemini CLI, Codex e outros

E o OpenDesign, onde entra?

O OpenDesign é um app desktop local-first e open source, mantido no repositório nexu-io/open-design sob licença Apache-2.0

Ele roda no modelo BYOK, com o agente de código que você já tem instalado

O mínimo é um daemon local mais um agente, e entre os adaptadores estão Claude Code, Codex, Cursor, Gemini CLI e OpenCode

Ou seja: o OpenDesign conversa e projeta, o HyperFrames dá o corpo de vídeo pra isso 🙂

Imagem, motion graphics e vídeo: a lista de artefatos que o OpenDesign fecha

Imagem: HTML que vira PNG

A geração de imagem não é aquele quadrado genérico de sempre

O gráfico renderiza em HTML nas dimensões exatas que você pediu (card social, capa, banner) e exporta pra PNG

Cores, tipografia e espaçamento vêm de um design system reutilizável, então a peça já nasce com a cara da sua marca

Motion e vídeo: o que o plugin cobre

Aqui a lista fica completona

O plugin Hyperframes do OpenDesign cobre composições de vídeo, animações, cartelas de título, overlays, legendas sincronizadas com o áudio, narração por TTS, visuais reativos ao áudio (batida, brilho, pulso), destaque animado de texto e transições de cena (crossfade, wipe, reveal e transições com shader)

Repara que isso já não é "animar uma telinha": é produção de vídeo mesmo

Fora o PNG que sai da geração de imagem, a exportação fecha o ciclo em arquivos reais: HTML, PDF, PPTX e MP4

A parte chata continua sendo decidir o formato certo pra cada mensagem, aquele mesmo dilema de escolher qual formato gerar no NotebookLM dependendo da situação

E o export que travava?

A versão mais recente publicada no repositório oficial é a 0.20.2, batizada de Production Exports, Under a Minute

Ela mexeu justamente no export travado por recurso que não carrega: agora ele termina em menos de um minuto em vez de dez

Quando uma fonte ou uma imagem nunca carrega, o Open Design para de esperar e entrega o arquivo assim mesmo, seja ele a imagem ou o PDF

E quando a falha é real, ela passa a informar o motivo, que é o mínimo que a gente pede pra não ficar adivinhando

O que você precisa antes de gerar o primeiro vídeo

Lista honesta, só do que dá pra confirmar:

• checkout local do Open Design rodando, com o daemon de pé e um agente de código compatível (Claude Code, Codex, Cursor, Gemini CLI ou OpenCode)
• a CLI do HyperFrames acessível via npx
• a skill de handoff hyperframes-handoff, que é quem ensina o Open Design a emitir a primeira versão da composição
• suas próprias chaves de API, caso você queira geração por modelo de imagem, vídeo ou áudio: provedores como OpenAI (gpt-image), MiniMax, ElevenLabs, fal e Suno

Esse ponto das chaves costuma travar gente que está acostumada a abrir um site pronto e sair gerando, tipo o gerador de imagem da xAI, onde a conta já está embutida na plataforma

Aqui é o contrário: você monta a estrutura, e a conta dos modelos é sua

Em compensação, o render do vídeo roda na sua máquina, sem render em nuvem e sem taxa por clipe

O custo vira tempo de máquina, e não crédito por peça

Como gerar imagem, motion graphics e vídeo a partir da conversa, passo a passo

1. Instale a skill de handoff no checkout local do Open Design

O passo a passo abaixo sai do guia de handoff Open Design + HyperFrames, publicado na documentação do próprio HyperFrames

Coloque o arquivo em skills/hyperframes-handoff/SKILL.md dentro do checkout local, reinicie o daemon e a skill aparece no seletor

Se você só quer testar, dá pra anexar o arquivo a um chat novo como uso único

O erro comum deste passo: instalar e não reiniciar o daemon, aí a skill simplesmente não aparece no seletor e a pessoa jura que baixou errado

2. Peça a composição na conversa do projeto

O que volta é um primeiro rascunho válido: HTML e CSS puros com uma timeline GSAP pausada

Vem paleta, conteúdo das cenas, entradas em GSAP, atividade no meio da cena e transições com shader

O erro comum deste passo: achar que aquilo já é o vídeo final. Não é, é rascunho, e rascunho pede acabamento

3. Respeite as restrições duras da composição

O guia de handoff é bem específico aqui, e vale ler com atenção:

• apenas HTML puro com GSAP
• não emitir composição React/Babel
• não chamar outras skills de protótipo
• nada de animação por relógio: setTimeout, setInterval e requestAnimationFrame estão fora

O motivo do último item é o que a gente falou lá em cima: animação por relógio quebra o seek determinístico

Tome cuidado! Esse é o tipo de coisa que fica linda no preview do navegador e sai picotada no MP4

4. Pré-visualize e renderize pela CLI

npx hyperframes preview
npx hyperframes render index.html

O primeiro comando abre o studio de preview no navegador

O segundo transforma o index.html em MP4, e é aí que o motor faz o trabalho pesado: ele grava o HTML animado quadro a quadro no navegador e codifica o vídeo ali mesmo, na sua máquina

O erro comum deste passo (e o mais central de todos): ficar procurando o botão de exportar MP4 dentro do app

A conversão pra vídeo é da CLI do HyperFrames, não do Open Design

E não para no render, viu? O ciclo de comandos de desenvolvimento é maior: init, lint, check, snapshot, preview, render, publish e doctor

O doctor costuma ser o primeiro amigo de quem tá apanhando no ambiente

Quem faz o quê: OpenDesign, agente de código e CLI do HyperFrames

A divisão de trabalho está declarada no guia de handoff, e entender ela evita frustração

Resumindo a régua: o handoff entrega rascunho válido, não render final

Quem espera peça pronta de produção saindo da primeira mensagem vai reclamar do timing das animações, e esse mesmo guia já avisa que timing é trabalho de quem pega o bastão depois

Onde isso rende: templates prontos, briefing virando storyboard e o studio local

Templates com a sua marca por cima

O OpenDesign oferece templates de HyperFrames prontos: light leaks cinematográficos, títulos com glitch, logo outros, tipografia cinética, animações de dados e reveals 3D

E o pulo do gato é que ele aplica as cores e a tipografia do seu design system por cima

Ou seja, você não fica com aquela cara de template de banco de imagem

De um link do GitHub pro MP4

Esse caso de uso é insano pra quem produz conteúdo técnico

Você descreve o vídeo ou cola o link de um artigo ou de um repositório do GitHub

O agente local escreve um storyboard de múltiplos frames, preenche cada frame com HTML animado e renderiza um MP4 real com o motor Hyperframes

O storyboard existir ANTES do render é o que te dá controle: dá pra brigar com a estrutura enquanto ela ainda é texto e HTML, que é barato

O fluxo do studio de vídeo

Os passos até a exportação são bem diretos: escolher um template ou colar um link, conversar com o agente, editar o texto de cada frame, adicionar trilha e exportar em MP4

Uma nota importante pra não te ferrar: o studio do projeto html-video sobe localmente com três comandos

pnpm install
pnpm -r build
html-video studio

Ele abre em 127.0.0.1:3071

Se liga que esses comandos são do projeto html-video, e não do app desktop do OpenDesign

São coisas diferentes, e misturar as duas é receita pra passar uma tarde debugando comando que nunca ia rodar ali 😛

Conclusão

A ideia de que o OpenDesign para na tela estática morreu

Com os HyperFrames, a mesma conversa de projeto fecha a lista de artefatos: imagem em PNG, motion graphics e vídeo em MP4, exportando também HTML, PDF e PPTX

E a mudança econômica é a parte mais interessante: com o render rodando na sua máquina, o custo do vídeo vira tempo de máquina em vez de crédito por clipe

Se você quer começar hoje, o caminho curto é esse: clona o OpenDesign, instala a skill de handoff em skills/hyperframes-handoff/SKILL.md, reinicia o daemon e roda um npx hyperframes preview em um rascunho pequeno

Peça longa só depois que o rascunho curto renderizar redondo, beleza?

até o próximo post!