hyperframes-motion-polish

HyperFrames Motion Polish

Use este skill quando o vídeo já existe, mas precisa parecer mais premium e fluido.

Diagnóstico por Segmento

Divida a linha do tempo em blocos de 3 a 5 segundos:

• O que o espectador deve entender neste segmento?
• Qual elemento recebe o foco?
• O cursor clica no alvo correto?
• O componente já apareceu antes do clique?
• Há uma pausa longa sem movimento?
• Algum texto ou imagem está cortado?

Ajustes de Alto Impacto

• Aproxime o feedback de clique do ponto de contato do cursor.
• Reduza as pausas entre benefícios e preço.
• Use power3.inOut para rolagens de UI.
• Use power2.out ou power3.out para entradas de texto e cartões.
• Evite animações filhas que conflitam com a rolagem do contêiner pai.
• Aplique um pequeno zoom de foco no alvo do clique, entre 1.015 e 1.035.
• Use uma sombra temporária para guiar o olhar.

Correções Comuns

Cursor clica em espaço vazio

• Atrase o clique até que o componente termine de entrar.
• Recalcule x/y a partir da caixa delimitadora do DOM.
• Se o contêiner rolar, valide a posição após a rolagem, não antes.

Texto sobreposto

• Aumente o intervalo entre as entradas.
• Reduza a escala do bloco, e não apenas o tamanho da fonte.
• Reduza o conteúdo visível por quadro.
• Garanta alturas fixas para cartões e botões.

Carrossel sem vida

• Faça o carrossel surgir com y, opacity e leve scale.
• Anime o eixo horizontal com uma pausa no cartão central.
• Aplique um zoom sutil no cartão selecionado.
• Remova bordas ou sombras que não existem no site original.

Segmento estático

• Transforme pausas em micromovimentos: leve paralaxe, respiração sutil, cursor preparando a próxima ação.
• Encurte as paradas onde não há leitura importante.
• Mostre benefícios e preço em uma sequência mais compacta.

Checklist de CTR

• O produto aparece cedo.
• O benefício aparece antes do preço.
• O preço aparece em uma tela limpa.
• O CTA recebe foco visual.
• O cursor mostra o percurso sem parecer aleatório.
• A transição para o checkout parece uma consequência do clique.

Validação

Use npx hyperframes inspect com amostras suficientes:

npx hyperframes inspect ./project --samples 18

Se possível, gere snapshots nos segundos criticados pelo cliente e revise:

• primeiro quadro;
• primeiro clique;
• produto principal;
• benefícios;
• preço;
• checkout;
• confirmação.

Faça mudanças cirúrgicas: ajuste timings, easings, offsets, escala e opacidade antes de reestruturar o HTML.