A microinteração que entrega toda IA: o hover que levanta o card 4px

Abra o console nas últimas seis landing pages feitas com IA que você viu. Passe o mouse num card de preço. Ele sobe. Passe num card de feature. Sobe a mesma quantidade. Passe num depoimento, num teaser de blog, na foto de um membro do time, no logo do rodapé que definitivamente não deveria ser um botão — e todos sobem exatamente 4 pixels e ganham uma sombra. O movimento é idêntico porque a marcação é idêntica:

<div class="rounded-2xl border bg-card p-6 shadow-sm
            transition-all hover:-translate-y-1 hover:shadow-xl">

hover:-translate-y-1 hover:shadow-xl. Vinte caracteres de Tailwind. É a microinteração mais publicada da era do build com IA, e no momento em que você aprende a enxergá-la, não consegue mais parar de ver. É o equivalente em design da animação de scroll fade-in-up — um default aplicado de forma tão uniforme que deixa de ser uma escolha e vira uma impressão digital.

O que as duas classes realmente fazem

-translate-y-1 é transform: translateY(-0.25rem) — um deslocamento de 4px para cima. shadow-xl troca o box-shadow padrão do Tailwind por um maior e mais suave:

/* shadow-sm (em repouso) */
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);

/* shadow-xl (no hover) */
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
            0 8px 10px -6px rgb(0 0 0 / 0.1);

E transition-all amarra as duas em 150ms com o easing padrão do Tailwind, cubic-bezier(0.4, 0, 0.2, 1). O card flutua para cima, projeta uma sombra mais profunda, e o cérebro lê "isso aqui dá pra levantar, pode clicar".

Isolado, é tranquilo. É um affordance real, legível, com raízes que antecedem o Tailwind — o sistema de elevação do Material Design fazia a mesma coisa com z-depth lá em 2014. O problema não é o gesto. O problema é que agora ele é aplicado em *tudo*, com *zero* variação de distância, easing ou sombra, em elementos que nem sequer são interativos.

Por que os geradores apelam pra isso por reflexo

Peça ao Cursor, ao v0, ao Lovable ou ao Bolt "uma grade de features" e você vai receber o hover-lift sem ter pedido. Ninguém digitou "adiciona uma animação de hover". Ele chega como default ambiente, e há três motivos.

É o centro estatístico dos dados de treino. Todo exemplo de card do shadcn/ui, todo bloco de marketing do Tailwind UI, todo repositório de "100 melhores landing pages" que foi raspado usa alguma variação de levantar no hover. Quando o modelo prevê "o que vem depois de rounded-2xl border", hover:-translate-y-1 hover:shadow-xl é a continuação mais provável. É regressão à média fantasiada de design. A monocultura do shadcn não termina no componente Card — ela se estende para como esse card se comporta.

É um sinal de "polimento" de graça. LLMs são ajustadas para parecer prestativas. Um card estático parece inacabado; um card que reage parece "interativo" e "moderno". O modelo apela para o gesto mais barato que passa a sensação de esforço. transition-all hover:-translate-y-1 é o equivalente, em motion design, a enfeitar o prato com um raminho de salsinha — não custa nada e sinaliza "alguém pensou nisso aqui", mesmo que ninguém tenha pensado.

transition-all é o empacotamento preguiçoso. Um dev cuidadoso faz a transição só das propriedades que mudam: transition-[transform,box-shadow]. O gerador escreve transition-all porque não sabe — ou não se dá ao trabalho de raciocinar — quais propriedades vão animar. Então ele anima o universo inteiro, e a gente volta nisso, porque tem um custo real.

Por que um levantamento uniforme tem cara de feito por máquina

Estados de hover desenhados por gente têm *intenção* — eles variam conforme a *função* do elemento. Um CTA principal pode preencher da esquerda para a direita. Um card de preço pode subir a borda para a cor de destaque e dar um pulinho num número. Uma thumbnail pode dar zoom na imagem dentro de uma moldura fixa. Um link de navegação pode deslizar um sublinhado. Cada gesto responde "o que significa interagir com essa coisa?".

O default da IA não responde nada. Ele aplica o mesmo levantamento de 4px num card $0/forever e num card $499/year, num teaser de blog clicável e num bloco de estatística não clicável, num botão e num ícone decorativo. Quando *todo* elemento compartilha *um* comportamento de hover, o comportamento para de comunicar. Um estado de hover que significa "tudo" não significa nada — vira só textura.

Esse é exatamente o sinal descrito em ler o CSS para auditar um site em busca de rastros de IA: abra o DevTools, passe o mouse por três elementos estruturalmente diferentes e veja se a regra :hover é byte por byte idêntica. Num site feito por gente, um CTA e um card de blog fazem hover de formas diferentes porque uma pessoa decidiu que deveriam. Num build de IA, você vai encontrar o mesmo translateY(-0.25rem) e a mesma shadow-xl nos três. A uniformidade *é* a assinatura — mesma energia do gradiente azul-para-roxo que aparece em toda hero independente da marca.

Tem um segundo sinal escondido no easing. O cubic-bezier(0.4, 0, 0.2, 1) padrão em 150ms é ótimo para um elemento. Mas quando doze cards de uma grade levantam todos com a curva e a duração idênticas, arrastar o mouse pela grade produz uma ondulação mecânica — cada card pulando e caindo com uma uniformidade de metrônomo. Movimento desenhado tem ritmo e variação; isso aqui não tem nenhum. É o primo espacial da coreografia uniforme de fade-in-up no scroll, onde toda seção entra com o mesmo translate-e-fade no mesmo timing.

O custo de performance e travamento que ninguém mede

É aqui que o default deixa de ser meramente sem graça e passa a ser ativamente ruim.

transition-all anima box-shadow, que é caro. Animar box-shadow força o navegador a repintar o elemento a cada frame — não dá para delegar ao compositor da GPU do jeito que transform e opacity permitem. Num card só você não percebe. Numa grade de 12 cards em que o usuário varre o mouse por todos, você está disparando repaints numa região grande de sombra borrada doze vezes em rápida sucessão. Num Android intermediário ou num notebook baratinho, é aí que o orçamento de frames vai embora e o levantamento começa a engasgar.

transition-all também anima coisas que você não queria. Por ser all, qualquer propriedade que por acaso mude — uma troca de cor vinda de um pai, um empurrão de layout, um re-render que troca uma classe — também é animada, às vezes produzindo um lag visível onde você queria uma mudança instantânea. É um tiro no pé justamente por ser indiscriminado.

O levantamento pode causar layout thrash se o card tiver vizinhos. O translateY em si é amigável ao compositor e não causa reflow. Mas os geradores costumam emparelhar o levantamento com um hover:scale-105, e escalar um card dentro de uma CSS grid apertada pode fazer ele sobrepor ou colidir visualmente com os irmãos, e em alguns layouts empurrar o conteúdo ao redor. O gesto de "polimento" cria um glitch.

A correção da metade de performance é uma linha:

<!-- Default da IA -->
<div class="transition-all hover:-translate-y-1 hover:shadow-xl">

<!-- Versão honesta: nomeie as propriedades, encurte o salto da sombra -->
<div class="transition-[transform,box-shadow] duration-200 ease-out
            hover:-translate-y-0.5 hover:shadow-lg
            will-change-transform">

Nomeie as propriedades para não animar o universo. Dê uma dica ao compositor com will-change-transform se o levantamento for o movimento principal. E corte o delta da sombra — ir de shadow-sm para shadow-lg em vez de shadow-xl repinta uma região menor e parece menos com um card em pânico.

Alternativas de hover que realmente significam algo

O objetivo não é banir os estados de hover. É fazer cada um *responder uma pergunta* sobre o elemento em que está. Aqui vão gestos com intenção, por tipo de elemento.

Um CTA principal: preencha, não flutue

O botão é a coisa na página que você mais quer que seja clicada. Dê a ele um preenchimento direcional para que o hover reforce "esta é a ação", e não "este é um card que por acaso é um botão".

.cta {
  background: #0a0a0a;
  background-image: linear-gradient(90deg, #f43f5e 0%, #f43f5e 100%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 220ms ease-out;
}
.cta:hover { background-size: 100% 100%; }

O destaque (#f43f5e, um rosa de verdade, não o azul do Tailwind — veja como escolher uma cor de destaque que não seja a padrão) entra varrendo da esquerda. É direcional, é específico de um botão e é barato para a GPU, porque aqui o background-size não repinta uma sombra borrada.

Um card de preço: mude o estado, não a altitude

O trabalho de um card de preço é comparação. O hover interessante não é "subir" — é "comprometer". Suba a borda para a cor de destaque e levante o CTA de dentro dele, deixando o card em si plantado no chão:

<div class="group rounded-2xl border-2 border-zinc-200
            transition-colors duration-200 hover:border-rose-500">
  <span class="text-4xl font-semibold tabular-nums">$24</span>
  <button class="mt-6 w-full rounded-lg bg-zinc-900 py-2
                 transition-transform group-hover:-translate-y-0.5">
    Start
  </button>
</div>

O card fica parado; a *borda* e o *botão interno* respondem. Isso lê como "você está focando neste plano", que é exatamente para o que serve um card de preço. Use group-hover para que o gesto mire no filho que importa, não na laje inteira.

Uma thumbnail de conteúdo: zoom dentro da moldura

Para um teaser de blog ou uma imagem de portfólio, o levantamento não diz nada. Dê zoom na imagem *dentro* de uma moldura com overflow fixo, para que a área ocupada pelo card nunca se mova e nada cause reflow:

<a class="block overflow-hidden rounded-xl">
  <img class="aspect-video w-full object-cover
              transition-transform duration-500 ease-out
              hover:scale-105" />
</a>

A moldura é estável, a imagem respira, o movimento é lento (500ms) e cinematográfico em vez de um estalo nervoso de 150ms. Easing mais lento na imagem, mais rápido nos botões — só essa variação já quebra a uniformidade carimbada pela máquina.

Um link de navegação: sublinhado que se desenha

.nav-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 180ms ease;
}
.nav-link:hover { background-size: 100% 1px; }

Um sublinhado que se desenha da esquerda para a direita. É um link, se comporta como um link e não compartilha nenhum DNA com o levantamento do card.

O bloco de estatística não interativo: nenhum hover

A alternativa mais subestimada. Se um bloco de estatística, um logo ou um título de seção não é clicável, não dê *nenhum* estado de hover a ele. A coisa mais humana que você pode fazer é deixar os elementos não interativos inertes. Parte do sinal entregue pelo default da IA é justamente fazer coisas decorativas parecerem levantáveis — a contenção reverte a impressão digital na hora.

A auditoria de uma linha e a cura

Para checar se o seu próprio site tem o sinal, cole isto no console e passe o mouse por aí:

[...document.querySelectorAll('*')]
  .map(el => getComputedStyle(el, ':hover')) // ilustrativo
// Na prática: passe o mouse por 3 elementos diferentes no DevTools,
// inspecione a regra :hover, compare transform + box-shadow.

Se um botão, um card e um não-link resolvem todos para translateY(-0.25rem) + shadow-xl, você publicou o default. A cura não é mais animação — é animação *diferenciada* mais inércia deliberada. Três ou quatro gestos de hover distintos, cada um casado com o que o seu elemento faz, mais um "sem hover" firme em tudo que é decorativo. Essa é a diferença entre movimento que comunica e movimento que é só o modelo enfeitando o prato.

O hover-lift não é o mal. É um affordance perfeitamente razoável que virou impressão digital por pura repetição — do mesmo jeito que todo site de IA apela para o mesmo punhado de truques. A correção é a mesma de sempre: pare de aceitar a continuação mais provável como decisão de design. Estados de hover são baratos. Estados de hover com *intenção* são o trabalho inteiro.