O que Website para HyperFrames faz?
Capture um site e produza um vídeo profissional a partir dele.
Os usuários dizem coisas como:
- "Capture https://... e 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 serve como porta de entrada para a próxima.
Etapa 1: Capturar e Entender
Leia: references/step-1-capture.md
Execute a captura, leia os dados extraídos e crie um resumo funcional usando o método de escrever e esquecer.
Portão: Imprima seu resumo do site (nome, cores principais, fontes, ativos-chave, uma frase que descreva a vibe).
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 — esse vem na Etapa 4.
Portão: 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 suposições.
Portão: 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, SFX. Este é o norte criativo — o documento que o engenheiro segue para construir cada composição.
Portão: STORYBOARD.md existe com direção batida por batida e uma tabela de auditoria de ativos.
Etapa 5: Gerar VO + Mapear Temporização
Leia: references/step-5-vo.md
Gere áudio TTS, transcreva para obter timestamps no nível da palavra e mapeie os timestamps para as batidas. Atualize o STORYBOARD.md com durações reais.
Portão: narration.wav (ou .mp3) + transcript.json existem. As temporizações das batidas no STORYBOARD.md foram atualizadas.
Etapa 6: Construir Composições
Leia: A skill hyperframes (carregue-a — cada regra importa)
Leia: references/step-6-build.md
Construa cada composição seguindo o storyboard. Após cada uma: auto-revisão de layout, posicionamento de ativos e qualidade da animação.
Portão: Cada composição foi auto-revisada. Nenhum elemento sobreposto, nenhum ativo mal posicionado, nenhuma imagem estática sem movimento.
Etapa 7: Validar e Entregar
Leia: references/step-7-validate.md
Lint, valide, faça snapshot, visualize. Entregue ao usuário o URL do projeto Studio localhost
(http://localhost:<port>/#project/<project-name>) primeiro — só renderize
para MP4 mediante solicitação explícita. Não trate index.html como o link de
entrega do projeto; é apenas contexto de código-fonte.
Portão: npx hyperframes lint e npx hyperframes validate passam com zero erros, e a resposta final inclui o URL ativo do projeto Studio.
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 batida por batida |
| step-5-vo.md | Etapa 5 — TTS, transcrição, temporização |
| step-6-build.md | Etapa 6 — construindo composições com auto-revisão |
| step-7-validate.md | Etapa 7 — lint, validar, snapshot, visualizar |
| 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) |