Cinematic Motion UI: landing pages que não parecem feitas por IA

Cinematic Motion UI (Interface de Movimento Cinematográfico)

Uma página gerada por um modelo geralmente se parece com a média de todas as páginas que ele já viu: um selo centralizado, um título em Inter negrito, um brilho roxo-para-rosa, dois botões, três cartões de ícone, tudo aparecendo na mesma velocidade. Nada está errado e nada foi decidido. As pessoas reconhecem essa média instantaneamente, e esse reconhecimento é o que significa "parece feito por IA".

Páginas de nível de galeria (aquelas vendidas como prompts premium em motionsites.ai) diferem em quatro aspectos, e esta skill é construída em torno deles:

1. Uma forte ideia visual carrega a página. Uma imagem ou vídeo cinematográfico, uma palavra gigante, um personagem, um campo generativo. A UI serve a ideia em vez de competir com ela.
2. Tipografia com contraste e cuidado. Uma decisão tipográfica que pertence a esta marca (um mega wordmark, um grotesco condensado em escala, uma serifa de alto contraste sozinha, mono como a voz), tracking negativo que escala com o tamanho, line-height abaixo de 1,15 em tipos de exibição e, às vezes, kerning ajustado letra por letra.
3. Movimento coreografado. Cada elemento recebe seu próprio tipo de entrada e seu próprio atraso, com uma única família de easing, para que a página se monte em vez de aparecer gradualmente. A página ainda está completa e legível se nenhuma animação for executada.
4. Valores específicos em toda parte. Hex exato, px exato, easing exato, texto exato. A vagueza é como os padrões (e a aparência de IA) vazam. Os prompts do MotionSites têm 15–40 KB de valores exatos para uma tela. Essa precisão é o produto.

A execução

Trabalhe nestas etapas em ordem. As etapas 1–2 são reflexão no papel e levam alguns minutos; pulá-las é a razão mais comum para o resultado voltar ao padrão mediano.

1. Ficha de direção

Leia o projeto (marca existente, fontes, cores, texto, recursos) e o briefing do usuário. Em seguida, escreva uma ficha de direção curta em sua resposta ou em um arquivo rascunho, usando references/spec-template.md § Ficha de direção:

• Tema e público: para quem é isto, em uma frase, usando os substantivos do próprio usuário.
• Arquétipo: escolha um dos sete em references/archetypes.md. Leia esse arquivo agora; ele fornece a composição, tipo, paleta, materiais e movimento característico de cada arquétipo. Se o usuário nomear uma referência (um site, um template do MotionSites), mapeie-o para o arquétipo mais próximo.
• Três palavras de clima que não sejam "moderno, limpo, elegante" (essas descrevem toda página).
• Paleta: fundo, tinta, tinta suave, no máximo um acento. Nomeie valores hex.
• Par tipográfico: de references/typography.md. Anote o papel de cada face.
• Movimentos que não estou usando: nomeie pelo menos dois dos padrões "AI com bom gosto" de references/anti-ai-tells.md § Sinais de segundo nível que esta página evitará, e o que os substitui. Os prompts de galeria foram tão copiados que sua própria receita agora é um sinal.
• Momento marcante: a única coisa que alguém descreveria a um amigo ("as letras do título sobem enquanto anéis finos se desenham ao redor do rosto dela"). Se você não conseguir nomeá-lo, a página será esquecível.
• Plano de mídia: o que preenche o hero e de onde vem (etapa 3).

2. Spec antes do código

Preencha o restante de references/spec-template.md: tokens, pilha de camadas, ordem de marcação, cada componente com seus estados, a tabela de movimento (elemento → tipo de entrada → atraso → duração) e a tabela de breakpoints. Mantenha-o conciso. É um documento de trabalho, não prosa. Esta é a etapa que torna o resultado preciso: uma vez que os valores são escritos, você implementa decisões em vez de recorrer a padrões.

Se o usuário pediu um prompt ou spec (para colar em outro construtor) em vez de código, o spec preenchido é a entrega. Siga a estrutura em references/spec-template.md § Formulário de prompt.

3. Mídia

A imagem ou vídeo do hero faz a maior parte do trabalho emocional. Leia references/media.md, depois escolha nesta ordem:

1. Recursos que o usuário forneceu ou que existem no projeto.
2. Um fundo generativo de assets/backgrounds/ (onda de partículas canvas, campo de shader WebGL, anéis SVG desenhados), ajustado à paleta. Estes são movimento real, não placeholders.
3. Um espaço de mídia projetado: um fallback estilizado (campo gradiente ou camada generativa) mais um prompt de geração pronto para uso para a imagem ou vídeo em um comentário e em seu relatório, para que o usuário possa colocar o arquivo.

Nunca faça hotlink de estoque aleatório (picsum, source.unsplash.com, serviços de placeholder) e nunca deixe caixas cinzas. Ambos são a maneira mais rápida de parecer inacabado.

4. Construção

• HTML de arquivo único (padrão quando não há projeto): comece de assets/starter.src.html. Ele é a estrutura (pilha de camadas, kit de movimento, failsafes, tratamento de movimento reduzido, menu mobile, granulação), não uma aparência. Reestilize e recomponha para o arquétipo escolhido. Mantenha os placeholders /*@@MOTION_KIT_CSS@@*/, /*@@MOTION_KIT_JS@@*/ e /*@@BG:nome@@*/ em seu código-fonte e produza o arquivo final com python3 <skill>/scripts/inline_kit.py page.src.html index.html, que incorpora o kit e os fundos exatamente em vez de você redigitá-los. (assets/starter.html é o mesmo starter já incorporado, para leitura.) As páginas examples/ mostram o nível de qualidade. Em avaliações cegas, elas pontuaram como menos parecidas com IA do que os templates de galeria das quais aprenderam: cinematic-bay-hero.html (A: venezianas de madeira se abrindo para uma baía nublada), dark-code-review-hero.html (B: o próprio diff do produto é a imagem, sem o tropeço da palavra de acento), light-window-hero.html (híbrido leve A/C: sol da manhã se movendo por uma parede em tempo real). Folheie o mais próximo do seu briefing para o nível de detalhe e a forma como um conceito une imagem, tipo e movimento. Não copie sua composição, cópia ou paleta: cada briefing merece sua própria ideia.
• React / Next / Tailwind / Framer Motion: leia references/react-port.md. Mantenha as animações de entrada em keyframes CSS para que o HTML renderizado no servidor seja visível sem hidratação, e use Framer Motion para movimento vinculado a scroll e interativo.
• Detalhes de movimento: references/motion.md. Superfícies: references/materials.md. Responsivo: references/responsive.md.
• SVG inline para cada ícone e a marca do logotipo, desenhados para esta marca. Ícones de fontes e conjuntos de ícones de estoque em fileiras de recursos são um forte sinal de template.

5. Palavras

O texto é metade da razão pela qual as páginas parecem IA. Regras:

• Use os substantivos e verbos concretos do tema ("Treine agentes em seus próprios runbooks", "Resorts desenhados a partir da linha da maré") em vez de abstrações de categoria ("Libere o poder da IA").
• Os títulos têm 4–9 palavras divididas em duas linhas propositalmente; a quebra de linha faz parte do design.
• Nenhuma prova inventada. Logotipos de clientes, depoimentos, avaliações e estatísticas de negócios devem vir do usuário. Se a composição precisar de uma linha de estatísticas e você não tiver números reais, use fatos não reivindicatórios (localização, ano de fundação, número de serviços oferecidos, horário de funcionamento) ou marque-os claramente como placeholders em comentários de código e em seu relatório.
• Escreva no idioma do usuário quando a página for para o mercado dele. A cópia em vietnamita precisa de uma fonte com cobertura completa de glifos vietnamitas (verifique references/typography.md).
• Evite as frases listadas em references/anti-ai-tells.md § Cópia. scripts/audit.py as sinaliza.

6. Verifique. Olhe para isso, depois corrija.

Passar nas verificações não é o mesmo que parecer bom, mas falhar nelas garante que não parece.

1. Execute a auditoria estática: python3 <skill>/scripts/audit.py <arquivo-ou-dir>. Corrija cada HIGH; corrija ou aceite conscientemente cada MEDIUM.
2. Abra a página em um navegador real (painel de navegador embutido, Playwright ou Chrome, o que estiver disponível). Aguarde ~3 s para a entrada terminar, depois execute o snippet em scripts/runtime_check.js através da avaliação JS do navegador. Ele relata texto que permanece oculto, estouro horizontal, texto cortado por um bloqueio de uma tela, mídia quebrada, fontes que não carregaram, pequenos alvos de toque e elementos que ainda executam animações. Leia também o console para erros. Uma aba de navegador oculta ou em segundo plano não renderiza frames, então timelines CSS/WAAPI e loops requestAnimationFrame param e a página pode parecer em branco ou meio construída em screenshots. Antes de julgar, tire uma ou duas screenshots (cada uma renderiza frames), ou execute document.getAnimations().forEach(a => { try { a.finish() } catch (e) {} }), depois verifique novamente. Também remova cada <script> de uma cópia da página e carregue-a uma vez: todo texto ainda deve estar visível e o layout intacto.
3. Screenshot em 1440×900, 1280×720 (laptop curto: o lugar mais comum onde heróis quebram) e 375×812. Se a página tiver um menu mobile, abra-o e tire screenshot também.
4. Olhe para cada screenshot e faça as perguntas em references/anti-ai-tells.md § O teste do squint. Corrija o que falhar. Faça pelo menos uma rodada de corrigir-e-olhar mesmo que a primeira passagem pareça boa.
5. Se você não puder abrir um navegador, diga isso no relatório. Não afirme verificação visual que você não fez.

7. Relatório

Diga ao usuário brevemente: a direção (arquétipo, momento marcante, par tipográfico), o que é placeholder (mídia, estatísticas, links) e exatamente como substituí-lo, e o que você verificou em quais tamanhos.

Leis que valem para todos os arquétipos

Composição

• O hero é um viewport no desktop (100dvh, sem scroll dentro do hero) a menos que o briefing seja uma landing page longa. O conteúdo ancora na parte inferior ou nos cantos, não no centro morto. A parte superior pertence à mídia.
• Pilha de camadas, de trás para frente: cor de fundo → mídia → scrim → conteúdo da página → granulação. O scrim é ajustado à mídia (um escurecimento radial atrás do texto, um gradiente superior atrás da navegação), para que o texto permaneça legível sem ser colocado em um cartão.
• No máximo duas chamadas para ação no hero: uma sólida, uma fantasma ou vidro. Nunca três.
• O "selo acima do título" e as "três estatísticas em uma fileira na parte inferior" são agora mobília de template. Use-os apenas quando o conteúdo for realmente um rótulo curto ou três números reais, e mesmo assim mude a forma (um único fato, uma pequena tabela, texto de canto, uma linha do tempo).
• Use um sistema de raio por arquétipo (sharp 0–7 px para tech e editorial, pills para suave e consumidor) e mantenha-se fiel a ele. rounded-2xl uniforme em tudo é uma assinatura de template.

Tipografia

• Tamanhos de exibição: tracking de −0,03em a −0,05em, line-height 0,9–1,12. Caixa alta e micro-cópia mono: tracking de +0,04em a +0,12em, maiúsculas, 11–14 px.
• No máximo um dispositivo de ênfase por título, escolhido do briefing. A palavra em itálico serifado dentro de um título sem serifa ("Treine agentes de IA em…") é o tique "IA de bom gosto" mais reconhecível de 2025–26: revisores cegos o sinalizam à primeira vista. Não o use por padrão. Prefira contraste de escala ou peso, uma quebra de linha deliberada, cor, uma marca desenhada ligada ao conceito (a ondulação de um diacrítico, um rabisco de caneta vermelha sob um bug), ou nenhuma ênfase. Se um itálico serifado realmente for a voz da marca, defina toda a linha nele em vez de uma palavra.

Movimento

• Uma família de easing (cubic-bezier(.16,1,.3,1) expo-out por padrão). As entradas duram 0,6–1,35 s e são escalonadas de cerca de 0,1 s a cerca de 1,5 s no total, em ordem de leitura. Cada tipo de elemento recebe uma entrada distinta (mask-rise para títulos, scale para pills de navegação, wipe para botões, rise para estatísticas).
• O conteúdo é visível em repouso. O estado oculto existe apenas no keyframe 0% com animation-fill-mode: both, mais um failsafe JS. Uma página que permanece em branco quando JS ou animações falham está quebrada, por mais boa que pareça no caminho feliz.
• Movimento ambiente (vídeo, partículas, shader) vive na camada de mídia. A UI em primeiro plano fica parada após sua entrada, exceto pelo feedback de hover (0,2–0,35 s) e efeitos opcionais vinculados ao scroll.
• Respeite prefers-reduced-motion: sem entrada, sem loop ambiente (renderize um único quadro estático).

Materiais

• Vidro e metal são para um ou dois controles flutuando sobre a mídia, não para todos os cartões. As receitas estão em references/materials.md.
• Adicione granulação (6–10 % de opacidade) sobre páginas com muita mídia. Ela unifica a imagem gerada com a UI.

Arquivos nesta skill

Arquivo	Leia quando
references/archetypes.md	Etapa 1, sempre
references/typography.md	Etapa 1, escolhendo o par tipográfico
references/spec-template.md	Etapa 2, sempre, mais o formulário de prompt quando o usuário quiser um prompt
references/media.md	Etapa 3
references/motion.md	Etapa 4, detalhes de movimento, efeitos de scroll, timelines WAAPI
references/materials.md	Etapa 4, botões, pills, vidro, metal, texto gradiente
references/responsive.md	Etapa 4, tokens, breakpoints incluindo altura, escalonamento de artboard, menu mobile
references/react-port.md	Projeto é React, Next, Tailwind ou Framer Motion
references/anti-ai-tells.md	Etapas 5–6
assets/starter.html	Construções de arquivo único
assets/motion-kit.css, assets/motion-kit.js	Qualquer construção (incorporá-los ou importá-los)
assets/backgrounds/*.js	Camada de mídia generativa
examples/*.html	Para calibrar o nível de qualidade (três heróis)
scripts/audit.py	Auditoria estática de sinais de IA e robustez
scripts/runtime_check.js	Verificações no navegador após o carregamento
scripts/inline_kit.py	Construir o arquivo único final a partir de um código-fonte com placeholders de kit/fundo