Revisão de UI

Criar Vídeo de Demonstração de Produto

Produza uma história de produto coerente que pareça operada por uma pessoa. Prefira gravar a interface real e adicionar apenas a camada de apresentação necessária para clareza.

Escolha o corte

• Use 1920×1080 a 30 ou 60 fps para um repositório, landing page ou workflow detalhado.
• Use 1080×1350 para um corte de feed social 4:5 e 1080×1920 para um story/reel vertical.
• Padrão de 45 a 90 segundos para um workflow completo e 8 a 15 segundos para um teaser social.
• Crie edições separadas para durações materialmente diferentes; não apenas acelere o corte longo.

Construa a história

Inspecione o aplicativo, os assets disponíveis, os scripts existentes e o tratamento da marca antes de autorizar. Escreva uma breve folha de batidas contendo gancho, problema, ação, resultado visível e chamada para ação. Mantenha uma ação significativa por batida. Deixe estados importantes descansarem tempo suficiente para serem lidos.

Para um workflow completo, mostre a intenção humana, a ação do agente, o resultado revisado e a resolução. Para um teaser, comece com o resultado e use apenas o mínimo de UI necessário para prová-lo.

Anime a interação humana

Leia motion-language.md antes de implementar animação de ponteiro, digitação ou câmera. Use human-motion.mjs para gerar caminhos de ponteiro e linhas do tempo de digitação determinísticos, depois adapte sua saída ao harness de gravação.

Aplique estes requisitos:

• Mantenha a posição do cursor contínua dentro de uma cena. Nunca o teletransporte entre ações visíveis.
• Mova-se ao longo de um caminho suavemente curvo com aceleração, desaceleração e uma pequena correção final.
• Varie a duração com a distância e o tamanho do alvo. Evite uma velocidade global de cursor.
• Faça uma pausa breve após chegar, anime pressionamento do ponteiro mais um ripple de clique, então execute o clique.
• Digite caractere por caractere com delays variados e pausas ligeiramente mais longas em espaços e pontuação.
• Renderize um cursor de inserção piscando sempre que um campo de texto estiver focado, incluindo pausas antes, durante e após a digitação.
• Evite erros de digitação sintéticos, a menos que eles apoiem a história.
• Esmaeça o ponteiro durante mudanças de cena difíceis se a posição contínua não puder ser preservada.

Grave e componha

Use a skill Playwright quando automação de navegador for necessária. Grave na resolução alvo final ou superior. Prefira o aplicativo real, layout real e transições de estado reais em vez de um mockup recriado. Se a encenação for necessária, preserve claramente a identidade visual do produto.

Use movimento de câmera contido:

• Panorâmica ou zoom para direcionar a atenção, não apenas para adicionar movimento.
• Anime um wrapper de câmera estável; não transicione vários filhos da página independentemente.
• Mantenha uma origem de transformação fixa e continue a partir da transformação atualmente renderizada para evitar saltos.
• Facilite a entrada e saída de zooms, segure no destino e dê ao movimento de retorno sua própria suavização.
• Evite mover a câmera, o cursor e os principais elementos da UI em direções concorrentes ao mesmo tempo.
• Mantenha sobreposições de texto dentro de margens seguras e legíveis sem áudio.
• Anime legendas e indicadores de progresso consistentemente com a linguagem visual do produto.

Codifique

Prefira H.264 MP4 com yuv420p e faststart para amplo suporte de reprodução. Preserve o master de alta resolução e derive cortes de entrega menores a partir dele. Mantenha o texto nítido e evite compressão excessiva ao redor das bordas da UI.

Revise e itere

Inspecione o vídeo completo, não apenas o primeiro quadro. Extraia uma folha de contato mais quadros em cada clique, transição, ponto final de zoom, conclusão de texto digitado e CTA final. Verifique:

• o percurso do cursor parece intencional, mas imperfeito;
• cada clique tem feedback visível e atinge o alvo;
• a velocidade do ponteiro e o ritmo de digitação variam naturalmente;
• o cursor pisca em campos de texto focados;
• os zooms permanecem contínuos em seu início, foco mantido, reversão e ponto final;
• os rótulos permanecem legíveis tempo suficiente;
• nenhum cursor, tooltip, modal ou legenda está cortado;
• as transições preservam a continuidade espacial;
• as dimensões, duração, codec e tamanho do arquivo correspondem ao corte escolhido.

Revise qualquer ação apressada antes da entrega. Forneça o vídeo final, quadro-pôster, duração, dimensões e caminho local ou do repositório. Atualize a documentação do repositório apenas quando solicitado.