hyperframes-commercial-video

HyperFrames Vídeo Comercial

Use esta skill após inspecionar o site com mobile-dom-fidelity.

Estrutura do Vídeo

1. Introdução com um título curto.
2. Rolagem ou entrada no carrossel.
3. Destaque principal do produto.
4. Clique simulado no produto.
5. Principais benefícios.
6. Preço.
7. Opções do usuário.
8. Carrinho ou checkout.
9. CTA ou confirmação final.

Jornada Interativa

O vídeo deve parecer uma sessão de navegação real, não uma sequência de slides. Modele cada ação como causa e efeito:

• a rolagem revela a seção;
• o carrossel percorre os produtos;
• o card principal retorna ao centro;
• o cursor clica no card;
• a página do produto entra;
• os benefícios aparecem;
• o preço e o CTA recebem foco;
• o clique leva ao carrinho ou checkout;
• o final mostra uma conclusão ou aprovação.

Regras de Composição

• Formato vertical: 1080x1920.
• Use texto real extraído do DOM.
• Use recursos locais ou URLs permitidas.
• Registre timelines GSAP pausadas em window.__timelines.
• Evite buscas durante a renderização.
• Evite Date.now() e Math.random() não determinísticos.
• Cada clique animado deve atingir um componente visível.

Padrões de Animação

• Títulos: digitação suave, sem velocidade agressiva.
• Cards: entrada com y, opacity e leve scale.
• Carrossel: movimento horizontal com pausa no card principal.
• Clique: cursor, ripple, micro-zoom e sombra de foco.
• Mudança de tela: transição lateral da direita para a esquerda.
• Produto: zoom suave na imagem principal e entrada escalonada dos benefícios.

Mapeamento de Cliques

Antes de animar um clique, registre:

seletor do alvo:
visível a partir de:
tempo do clique:
retângulo do alvo:
clique x/y:
cena pós-clique:

Não aceite o clique se:

• o alvo ainda estiver invisível;
• o alvo estiver fora da janela de visualização;
• outra sobreposição cobrir o alvo;
• o cursor chegar antes do fim da animação de entrada.

Validação Obrigatória

Antes da entrega:

npx hyperframes lint ./project
npx hyperframes validate ./project
npx hyperframes inspect ./project --samples 18

Se houver cliques simulados, valide também:

• o alvo existe;
• o alvo está visível no momento do clique;
• o centro do clique está dentro da caixa delimitadora;
• nenhuma imagem quebrada;
• nenhum texto sobreposto nos quadros-chave.

Resultado Esperado

• composição index.html;
• vídeo MP4 renderizado;
• resumo da validação;
• pasta de entrega limpa, se necessário.