Website para HyperFrames
Capture um site e depois produza um vídeo profissional a partir dele.
Os usuários dizem coisas como:
- "Capture https://... e me faça um vídeo de lançamento de produto de 25 segundos"
- "Transforme este site em um anúncio social de 15 segundos para o Instagram"
- "Crie um tour de produto de 30 segundos a partir de https://..."
O fluxo de trabalho tem 7 etapas. Cada uma produz um artefato que condiciona a próxima.
Etapa 1: Capturar e Entender
Leia: references/step-1-capture.md
Execute a captura, leia os dados extraídos e construa um resumo funcional usando o método de escrever e esquecer.
Pré-requisito: Imprima seu resumo do site (nome, cores principais, fontes, ativos-chave, uma frase de clima).
Etapa 2: Escrever DESIGN.md
Leia: references/step-2-design.md
Escreva uma referência de marca simples para o site capturado. 6 seções, ~90 linhas. Esta é uma folha de dicas, não o plano criativo — isso virá na Etapa 4.
Pré-requisito: DESIGN.md existe no diretório do projeto.
Etapa 3: Escrever SCRIPT
Leia: references/step-3-script.md
Escreva o roteiro de narração. A espinha dorsal da história. As durações das cenas vêm da narração, não de palpites.
Pré-requisito: SCRIPT.md existe no diretório do projeto.
Etapa 4: Escrever STORYBOARD
Leia: references/step-4-storyboard.md
Escreva a direção criativa por batida: clima, câmera, animações, transições, ativos, camadas de profundidade, efeitos sonoros. Este é o norte criativo — o documento que o engenheiro segue para construir cada composição.
Pré-requisito: STORYBOARD.md existe com direção batida por batida e uma tabela de auditoria de ativos.
Etapa 5: Gerar VO + Mapear Tempo
Leia: references/step-5-vo.md
Gere áudio TTS, transcreva para timestamps por palavra e mapeie timestamps para as batidas. Atualize STORYBOARD.md com durações reais.
Pré-requisito: narration.wav (ou .mp3) + transcript.json existem. Tempos das batidas em STORYBOARD.md atualizados.
Etapa 6: Construir Composições
Leia: A skill /hyperframes (invoque-a — cada regra importa)
Leia: references/step-6-build.md
Construa cada composição seguindo o storyboard. Após cada uma: auto-revisão para layout, posicionamento de ativos e qualidade de animação.
Pré-requisito: Cada composição foi auto-revisada. Sem elementos sobrepostos, sem ativos mal posicionados, sem imagens estáticas sem movimento.
Etapa 7: Validar e Entregar
Leia: references/step-7-validate.md
Linte, valide, pré-visualize. Crie um HANDOFF.md para continuidade em múltiplas sessões.
Pré-requisito: npx hyperframes lint e npx hyperframes validate passam com zero erros.
Referência Rápida
Tipos de Vídeo
| Tipo | Duração | Batidas | Narração |
|---|---|---|---|
| Anúncio social (IG/TikTok) | 10-15s | 3-4 | Frase de gancho opcional |
| Demonstração de produto | 30-60s | 5-8 | Narração completa |
| Anúncio de funcionalidade | 15-30s | 3-5 | Narração completa |
| Reel de marca | 20-45s | 4-6 | Opcional, foco em música |
| Teaser de lançamento | 10-20s | 2-4 | Mínimo, alta energia |
Formato
- Paisagem: 1920x1080 (padrão)
- Retrato: 1080x1920 (Instagram Stories, TikTok)
- Quadrado: 1080x1080 (feed do Instagram)
Arquivos de Referência
| Arquivo | Quando ler |
|---|---|
| step-1-capture.md | Etapa 1 — lendo dados capturados |
| step-2-design.md | Etapa 2 — escrevendo DESIGN.md |
| step-3-script.md | Etapa 3 — escrevendo o roteiro de narração |
| step-4-storyboard.md | Etapa 4 — direção criativa por batida |
| step-5-vo.md | Etapa 5 — TTS, transcrição, tempo |
| step-6-build.md | Etapa 6 — construindo composições com auto-revisão |
| step-7-validate.md | Etapa 7 — lint, validar, pré-visualizar, handoff |
| techniques.md | Etapas 4 e 6 — 10 técnicas visuais com padrões de código (desenho SVG, Canvas 2D, 3D, tipografia, Lottie, vídeo, digitação, fontes variáveis, MotionPath, transições) |