Este artigo foi escrito em 6 de novembro de 2026.
As ferramentas de IA mudam rapidamente. A quantidade de movimento que uma página consegue suportar, não. Uma alteração ao focar o cursor (hover), uma transição curta (transition) e uma pequena resposta ao toque são mais do que suficientes. Efeitos de vidro translúcido (glassmorphism), paralaxe (parallax), animações escalonadas (stagger), carrosséis (carousel) e ajuste de rolagem (scroll snap) devem ser reconhecidos para que possam ser recusados. Encare este texto como um limite, e não como um manual de animação.
Os modelos de IA costumam encher as páginas de movimento porque a animação transmite a falsa impressão de um trabalho mais elaborado. Uma página estática pode parecer incompleta em uma demonstração em vídeo, mas é perfeita em uma sala de espera. As pessoas para quem esta série foi escrita estão mais próximas da sala de espera: um celular, uma rua ensolarada, um idioma que talvez não seja o principal do modelo e nenhuma paciência para elementos que se movem enquanto tentam ler um preço. O movimento é justificado quando explica uma mudança de estado; jamais quando serve apenas para mostrar que alguém conhece o nome de um efeito visual.
Três efeitos que justificam sua presença
A mudança ao focar o cursor (hover) é a alteração visual que ocorre quando o ponteiro do mouse repousa sobre um controle: uma leve mudança de cor ou um sublinhado em um link (link). Ela avisa a quem usa mouse que o item é interativo. No entanto, esse recurso não existe em telas sensíveis ao toque: tudo o que só aparece ao focar o cursor fica invisível no celular. Por isso, especifique no prompt que essa mesma indicação deve surgir também ao receber o foco (focus) de navegação do teclado, ou então não a utilize.
Uma transição (transition) é o curto período de tempo que uma mudança leva para acontecer, geralmente em torno de um quinto de segundo (0,2 segundo). Uma gaveta (drawer) que surge de repente em um único quadro parece quebrada; uma que leva um segundo inteiro para abrir parece atrasada. Peça uma transição curta tanto na abertura quanto no fechamento. Não peça transições letra por letra ao exibir um texto: ler não é um espetáculo.
Uma microinteração (microinteraction) é uma resposta pequena a uma ação pequena: o botão de salvar que exibe brevemente um ícone de confirmação ou um filtro selecionado que altera sutilmente seu estado. É a mesma transparência oferecida por uma mensagem temporária (toast), mas em formato reduzido. Não se trata de mascote animado, chuva de confetes ou efeitos sonoros. Se você não consegue descrever a resposta em uma única frase curta, ela já é grande demais.
Nomes que você só precisa aprender a recusar
Estas palavras representam efeitos reais de design web, mas não são etapas obrigatórias pelas quais sua primeira página precisa passar. Quando o modelo de IA sugerir esses recursos, você poderá recusá-los chamando-os pelo nome técnico em inglês:
- Glassmorphism — Painéis com efeito de vidro fosco translúcido. Eles reduzem bastante o contraste do texto sobreposto. Se as palavras ficarem difíceis de ler, remova o efeito de vidro.
- Paralaxe (Parallax) — Fundos que se movem em uma velocidade diferente da do texto principal. Pode causar enjoo em algumas pessoas e vai contra a configuração de movimento reduzido do sistema.
- Bento — Grades com caixas de tamanhos desiguais, nomeadas em homenagem às marmitas japonesas. São úteis mais tarde para painéis de controle (dashboards), mas em uma primeira página confundem a hierarquia da informação ao usar o tamanho como argumento principal.
- Escalonamento (Stagger) — Itens que aparecem na tela um após o outro com um atraso proposital. Isso obriga a pessoa a esperar por uma lista que ela poderia ter lido de imediato.
- Carrossel (Carousel) — Linhas ou cartões que deslizam para os lados. A grande maioria das pessoas nunca passa do primeiro slide; é muito mais eficiente colocar a informação diretamente integrada à página.
- Ajuste de rolagem (Scroll snap) — A rolagem que trava a página na próxima tela cheia. No celular, isso costuma prender o usuário entre seções que ele só queria folhear rapidamente.
Você não precisa dedicar tempo treinando esses efeitos; basta recusá-los com clareza quando surgirem sem terem sido pedidos: “No glass, no parallax, no carousel, no scroll snap. Short transitions only.” Essa frase simples em inglês funciona como um filtro de design perfeito.
Um preço lido na rua
Imagine alguém parado na rua, em frente a um estabelecimento, segurando o celular sob a luz direta do sol e tentando consultar o valor de uma aula antes de entrar. A página que lhe entregaram faz o preço deslizar após um segundo de pausa, colocado sobre a foto da rua e com um fundo que se move em velocidade diferente da do texto. Na tela do computador no escritório parecia um trabalho sofisticado; sob o sol, parece uma página instável que não passa confiança. A pessoa decide entrar e perguntar pessoalmente: a tela falhou na única função útil que tinha.
Isso acontece diariamente em locais onde o celular é a única tela disponível e a rua funciona como escritório. Um efeito de movimento que exige uma sala escura e um monitor grande não é um padrão neutro, mas um vício copiado de estúdio. Nomear o efeito em inglês é a forma exata de recusar a cópia. Você não precisa criticar o estilo; basta dizer qual substantivo não quer no inglês que o modelo entende, evitando que ele volte a aparecer sob desculpas como “deixar mais bonito”.
A instrução técnica que evita esses problemas é curta e usa os termos corretos: sem carrossel para o preço, sem efeito de vidro atrás dos números, sem paralaxe e sem escalonamento na lista de aulas. Uma transição curta ao abrir uma gaveta (drawer) e nenhuma animação se a pessoa ativou a opção de movimento reduzido (reduced motion) no celular. Texto escuro em uma superfície clara e plana. O preço deve ser o primeiro dado da seção, e não o segundo slide. Você pode escrever essa regra uma vez e reutilizá-la em todos os seus prompts este ano; ela continuará verdadeira por muito mais tempo do que as modas visuais que tentam os modelos.
A configuração que se sobrepõe a qualquer efeito
Os sistemas operacionais permitem que o usuário ative a opção de movimento reduzido (reduced motion). Uma página que ignora essa preferência não é animada; ela está desrespeitando uma necessidade declarada. Inclua esta orientação no prompt: se a pessoa preferir movimento reduzido, exiba o estado final do elemento de imediato, sem deslizamentos ou escalonamentos. A informação permanece; a animação é cancelada.
O contraste adequado sobrevive a todas as modas visuais. Texto sobre fotos, sobre vidro fosco ou em tom cinza claro que parecia elegante no monitor do designer falha sob o sol, em telas baratas e para olhos cansados. Peça texto escuro em superfícies claras e planas, a menos que você tenha um motivo muito forte para não fazer isso. O nome da superfície é opcional; palavras perfeitamente legíveis não são.
O percurso ao longo desta série nunca foi memorizar quarenta definições técnicas, mas aplicar quatro decisões fundamentais: dê o nome do componente em inglês para que a IA não precise adivinhar; escreva os textos e rótulos no idioma dos seus leitores; defina se o momento exige parar, compartilhar ou apenas informar; e mantenha a página firme o suficiente para ser lida sem distrações. Quem domina essas quatro decisões superou o vocabulário essencial que define a qualidade do trabalho. O resto é apenas um catálogo secundário para consultar mais tarde, pelo nome em inglês, quando uma página realmente precisar.