No passado, fazer vídeos exigia encontrar materiais, aprender edição e combinar músicas, o que envolvia custos extremamente altos. Agora, com a IA, basta usar bem a combinação Codex + HyperFrames para que a edição básica e a animação sejam concluídas em apenas 1 hora. Neste artigo, vou combinar minha própria experiência prática para compartilhar as técnicas essenciais de usar Codex + HyperFrames para criar vídeos, ajudando todo criador de conteúdo a alcançar a liberdade na edição de vídeos.
1. O que é HyperFrames? Por que usar?
HyperFrames é um framework de produção de vídeo baseado em código, de código aberto, criado por @HeyGen. Com ele, você não precisa abrir nenhum software de edição; pode gerar vídeos diretamente escrevendo código.
Por que ele é especialmente adequado para ser combinado com o Codex? Dois motivos:
- Escrever código é o que os Agentes de IA fazem de melhor, e o Codex é atualmente uma ferramenta superpoderosa de nível T0. Você apenas descreve os visuais que deseja e deixa a codificação com ele.
- O HyperFrames é escrito diretamente em HTML, naturalmente projetado para Agentes. A IA escreve HTML de forma mais fluida do que qualquer outro formato, com menos erros e iterações mais rápidas.
Portanto, essa combinação nasceu para a criação de vídeos. Você descreve claramente os visuais desejados, o Codex é responsável por escrever o código e o HyperFrames renderiza o vídeo final.
2. Como Configurar o HyperFrames no Codex
As etapas básicas de instalação e configuração são as seguintes:
1. Instalar o Aplicativo Codex
Endereço para download: https://chatgpt.com/codex/
2. Instalar o Plugin HyperFrames
Entre no Aplicativo Codex e clique em Plugins na barra lateral esquerda.
Pesquise por HyperFrames e clique no sinal "+" para adicioná-lo.
Agora, você pode começar a usar os recursos do HyperFrames para criar vídeos dentro do Codex.
3. Técnicas Práticas
Após a configuração, como usar na prática? Aqui estão três dicas de produção de vídeo.
1. Prompts: Descreva os visuais desejados claramente, quanto mais específico, melhor
O cerne de um bom prompt é traduzir as imagens detalhadas da sua mente em palavras. Especificamente, escreva o seguinte:
- Tipo de Animação/Vídeo: Demonstração de função, visualização de dados, teaser de evento de lançamento, curta para redes sociais, etc.
- Duração e Proporção de Tela: Ex.: 10 segundos, formato 9:16 para Douyin, etc.
- Objetivo do Vídeo: Uma frase explicando sobre o que é este vídeo e o que o público deve entender.
- Estilo Visual: Ex.: estilo Apple, interface de software realista, tecnologia minimalista, cinematográfico, etc.
- Elementos-chave: Texto essencial, ícones, produtos, dados, personagens, caminhos de materiais, etc.
- Requisitos de Movimento: Ex.: digitação em fluxo, fade in/out, transições de zoom, expansão de cartão, aproximação de câmera, etc.
- Requisitos de Áudio: Ex.: música de fundo, sons de digitação, sons de clique, narração, sincronização de efeitos sonoros, etc.
Por exemplo, aqui está o prompt que usei ao fazer uma abertura para um vídeo sobre a evolução do iPhone:
1Use [@HyperFrames] para criar uma animação de abertura que ilustre "Codex chamando HyperFrames para gerar um vídeo", proporção de tela padrão, duração não superior a 10s.2#AnimationType + Duration3O objetivo é mostrar o processo de "Estou usando HyperFrames no Codex para gerar um vídeo."4#VideoGoal5A cena começa a partir de uma página inicial de chat realista do Codex com tema escuro, com "What should we work on?" no centro e uma grande caixa de entrada abaixo. Na caixa de entrada, o texto começa a ser digitado como uma pessoa real: "Ajude-me a usar HyperFrames by HeyGen para criar uma animação de exibição dos modelos de iPhone ao longo das gerações." A parte "HyperFrames by HeyGen" deve aparecer como uma menção/chip de plugin com um pequeno ícone, claramente distinguida do texto normal.6#KeyElements + Motion7Após a digitação ser concluída, clique em enviar para entrar no estado de geração: o ícone do Codex × ícone do HyperFrames aparece no centro, com "GENERATING..." exibido abaixo. Esta fase deve ter animações de geração leves, como ícones pulsando, saltando ou vibrando, com pontos piscando, mas a sensação geral deve ser contida e profissional.8#KeyElements + Motion9Uma vez que a geração esteja concluída, retorne à interface de chat do Codex onde um cartão de pré-visualização de vídeo aparece. A capa do cartão é uma prévia escura de produto no estilo Apple com um logotipo da Apple e um botão de play no centro. Após clicar no botão de play, o cartão de vídeo se expande suavemente para tela cheia, como um vídeo formal sendo aberto, servindo como uma transição para o vídeo subsequente.10#KeyElements + Motion11O estilo geral deve ser realista, contido e de alto nível, próximo às interfaces reais de produtos Codex e tomadas de operação de software em filmes de lançamento da Apple. Use fade in/fade out suave para as trocas de interface; todo movimento deve ser limpo, nítido e natural.12#VisualStyle13Por favor, implemente usando HyperFrames e garanta que possa ser renderizado de forma estável como MP4. Os sons de digitação, clique e geração devem ser integrados como faixas de áudio reais, não apenas efeitos sonoros em tempo real do navegador.14#AudioRequirements
Claro, a primeira versão provavelmente não será perfeita; podemos simplesmente dizer ao Agente o que mudar. Observe para não fazer muitas alterações de uma vez, visualize logo após as alterações e continue ajustando se não estiver satisfeito. Quando necessário, tire um print e marque as áreas problemáticas diretamente na imagem, o que é muito mais eficiente do que feedback por texto.
2. Geração de Imagens: Use a habilidade Image Gen para criar ativos-chave
Fazer vídeos geralmente envolve gastar muito tempo preparando ativos visuais — fotos de produtos, imagens de capa, quadros-chave, etc. O Codex tem o GPT Image 2 integrado, permitindo que você gere os ativos necessários diretamente no projeto, com efeitos requintados e estilos controláveis.
Método de ativação: Digite $image-gen
Por exemplo: Use $image-gen gpt image 2 para me ajudar a gerar uma vista frontal e traseira do iPhone original, respectivamente, referindo-se a materiais oficiais de celular, simulando o telefone real o máximo possível. Observe que as imagens devem ser preferencialmente transparentes para que possam ser facilmente integradas em qualquer fundo.
3. Geração de Música: Use IA para gerar música de fundo diretamente
Depois que o vídeo estiver pronto, como resolver a parte da música? Recomendo o Suno (suno.com), um site de geração de música por IA que oferece créditos gratuitos diários e fornece duas versões diferentes por geração, com boa qualidade geral.
Sugere-se especificar o estilo e o clima desejados no prompt, como "rítmico, épico, sem vocais".
Exemplo:
1Estilo de trailer de filme moderno, começando com percussão nítida e cortante (estalos, palmas), combinada com uma melodia minimalista de piano, adicionando gradualmente baixo eletrônico e ritmos em camadas. O refrão usa acordes de sintetizador para impulsionar camada por camada, e o clímax adiciona impacto orquestral completo e ritmos intensos. A textura geral é de alto nível e limpa, semelhante à energia de um evento de lançamento da Apple, 118 BPM, instrumental sem vocais.
!https://pbs.twimg.com/amplify_video_thumb/2051612857519738889/img/VhmZWed-aIZObqWb.jpg
Abaixo está o vídeo completo da evolução do iPhone que fiz usando Codex + HyperFrames; desde materiais e visuais até a música, tudo foi feito em 1 hora. O limite para a edição de vídeo foi significativamente reduzido pela IA. Se você tem ideias, vá experimentar; criar vídeos manualmente com código é realmente satisfatório.
Finalmente, sinta-se à vontade para me seguir @Saccc_c, continuarei compartilhando insights de IA e jogadas práticas.
