Visão Geral
Esta habilidade monta um vídeo de lançamento de produto — cena principal, destaques de funcionalidades, timing — como uma composição HyperFrames. Use quando um novo lançamento precisar de um clipe de anúncio conciso e personalizável. Ela renderiza o MP4 final a partir dos ativos do produto que você fornecer.
HyperFrames — Vídeo de Lançamento de Produto
Crie vídeos de lançamento de produto escrevendo composições em HTML que o HyperFrames renderiza em MP4 determinístico. O pipeline de vídeo nativo para agentes: LLMs escrevem HTML (sua primeira linguagem), HyperFrames renderiza vídeo com precisão de quadro via headless Chrome + FFmpeg.
Quando Usar
- O usuário quer um vídeo de lançamento de produto a partir de uma URL, briefing ou roteiro
- O usuário quer um tour / showcase do site com os visuais do próprio produto
- O usuário quer um clipe social (TikTok/Reels/Shorts) com legendas cinéticas e branding
- O usuário quer um vídeo de marketing/promoção com sobreposições animadas e música
- O usuário diz "faça um vídeo para mim" e fornece uma URL ou descrição do produto
Quando NÃO Usar
- O usuário quer conteúdo com pessoas reais / UGC / estúdio (precisa de câmera, não de HTML)
- O usuário quer transmissão ao vivo / live commerce (precisa de ingest RTMP)
- O usuário quer uma entrevista com apresentador (use
hyperframes-embedded-captionsouhyperframes-talking-head-recut) - O usuário quer um explicador puro sem produto/URL (use
hyperframes-faceless-explainer) - O usuário quer uma apresentação/slides (use
hyperframes-slideshow)
Fluxo de Trabalho
0 · Inicializar o projeto
npx hyperframes init my-launch-video
cd my-launch-video
Isso cria a estrutura do projeto com index.html, package.json e o CLI do HyperFrames configurado.
1 · Planejar o vídeo
- Entrada: URL do produto, briefing ou roteiro
- Saída: Storyboard de 3 a 6 cenas com timing (ponto ideal 30-90s no total)
- Orçamento: título ≤2s, encerramento ≤3s, cenas do meio ≈8-12s cada
- Escolha uma linguagem visual: navegue por
hyperframes.heygen.com/designpara templates frame.md
2 · Escrever o HTML da composição
O contrato de composição:
<!doctype html>
<html lang="en">
<body>
<div
id="main"
data-composition-id="intro"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div
class="clip"
data-start="0"
data-duration="5"
data-track-index="0"
>
<!-- Conteúdo da cena -->
</div>
</div>
</body>
</html>
Atributos principais:
data-composition-id: ID único para a composiçãodata-start/data-duration: tempo em segundosdata-width/data-height: dimensões da viewport (1080×1920 para 9:16)data-fps: taxa de quadros (30 padrão)class="clip": marca elementos com tempodata-track-index: ordem das camadas (maior = sobreposto)
3 · Conectar animações buscáveis
Use GSAP (recomendado), keyframes CSS ou WAAPI. Todas as animações devem ser buscáveis (determinísticas — mesmo quadro no mesmo tempo, a cada renderização).
Padrão GSAP (recomendado):
const tl = gsap.timeline({ paused: true });
tl.to("#title", { opacity: 1, y: 0, duration: 0.8, ease: "power4.out" }, 0.5);
tl.to("#image", { scale: 1, opacity: 1, duration: 1.2, ease: "power3.out" }, 1.0);
window.__timelines = { main: tl };
Padrão keyframes CSS:
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
4 · Adicionar mídia
- Imagens: baixe para o diretório
public/, referencie viastaticFile()ou caminho relativo - Vídeos de fundo: coloque em
assets/, faça loop viadata-loop - Áudio/BGM: adicione via
<audio data-start="0" data-duration="15" src="./bgm.mp3"> - Narração: gere via TTS, alinhe legendas aos timestamps das palavras
5 · Fazer lint e verificar
npx hyperframes check # validar contrato de composição
npx hyperframes lint # verificar erros comuns
Corrija todos os erros antes de prosseguir. Avisos são aceitáveis, mas devem ser revisados.
6 · Pré-visualizar
npx hyperframes preview # abre Hyperframes Studio com HMR
Verifique 3-4 momentos-chave via __player.seek(time) na página de composição bruta. Confirme:
- Animações disparam no momento certo
- Sem flashes brancos nos cortes (fundo de cena opaco)
- Legendas visíveis e legíveis
- Níveis de áudio equilibrados
7 · Renderizar
npx hyperframes render --output launch-video.mp4
Verifique a saída:
ffmpeg -ss 3 -i launch-video.mp4 -frames:v 1 frame-3s.png # verificar legendas
ffmpeg -ss 15 -i launch-video.mp4 -frames:v 1 frame-15s.png # verificar cena
Tabela Anti-Racionalização
| Racionalização | Realidade |
|---|---|
| "Vou usar um editor de vídeo" | Editores GUI não são nativos para agentes; HTML é o que LLMs escrevem melhor |
| "Vou pular a etapa de lint" | O lint captura erros de contrato de composição que quebram renderizações |
| "Vou usar Remotion" | Remotion requer raciocínio em React; HTML é mais simples para agentes |
| "Vou adicionar animações ociosas para preencher tempo" | Oscilação ociosa é proibida — cada fase deve performar (veja hyperframes-cut-the-curve) |
| "Vou centralizar o conteúdo a 42% para deixar espaço para legendas" | Legendas são uma sobreposição — centralize no centro real (y = H/2) |
| "Vou usar crossfade entre as cenas" | Crossfades não têm portador — use cut-the-curve para limites padrão |
| "Vou escrever um único arquivo HTML grande sem cenas" | Cenas são a unidade de composição — cada uma recebe seu próprio wrapper clip |
| "Vou pular a pré-visualização e renderizar direto" | A pré-visualização captura erros de timing que desperdiçam tempo de renderização |
Exemplo de Código
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #0a0a0a; }
#main {
position: relative;
width: 1080px;
height: 1920px;
overflow: hidden;
}
.scene {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.scene.active { opacity: 1; }
.hook-bg {
background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 80px;
text-align: center;
color: white;
font-family: system-ui, sans-serif;
}
.hook-text {
font-size: 72px;
font-weight: 800;
line-height: 1.1;
transform: translateY(40px);
opacity: 0;
}
.animate-in {
animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fadeInUp {
from { transform: translateY(40px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
</style>
</head>
<body>
<div
id="main"
data-composition-id="product-ad"
data-start="0"
data-duration="15"
data-width="1080"
data-height="1920"
data-fps="30"
>
<div class="scene hook-bg" data-start="0" data-duration="5" data-track-index="0">
<h1 class="hook-text animate-in" data-start="0.5" data-duration="4">
Product Name
</h1>
</div>
</div>
<script>
// Ativação de cena via IntersectionObserver ou temporizador manual
const scenes = document.querySelectorAll('.scene');
scenes.forEach(scene => {
const start = parseFloat(scene.dataset.start);
const duration = parseFloat(scene.dataset.duration);
setTimeout(() => scene.classList.add('active'), start * 1000);
setTimeout(() => scene.classList.remove('active'), (start + duration) * 1000);
});
</script>
</body>
</html>
Verificação
- Composição passa em
npx hyperframes checkcom 0 erros - Todas as cenas têm
data-start,data-duration,data-track-index - Animações são buscáveis (determinísticas, não dependentes de relógio)
- Pré-visualização mostra timing correto em 3+ momentos verificados
- MP4 renderizado não tem flashes brancos, quadros congelados ou legendas ausentes
- Níveis de áudio estão equilibrados (corte de narração aplicado se necessário)
- Resolução de saída corresponde ao alvo (1080×1920 para 9:16, 1920×1080 para 16:9)