Welz — header mock (alvo do voo)
Laboratório de micro-interação — índice

3 interações líquidas, todas já em produção

Cada seção abaixo é o laboratório onde a técnica foi calibrada antes de ir pro código real — resumo de onde cada uma está hoje.

Laboratório de micro-interação

Flavor Toggle — thumb líquido

Teste isolado do comportamento pedido em cima das referências da página Figma "Ref. Líquidas" (gotas esticando com fio até romper, metal líquido puxando pseudópode ao ser derramado, impacto com recuo elástico). Clique nas opções abaixo pra ver a transição — o resto do toggle (fundo, borda, texto) é idêntico ao componente real do carrinho/seção 6.

Receita das 4 fases (mapeada pro seu texto): 1) encolhe rapidamente na origem, estourando além do alvo e corrigindo de volta — mesmo overshoot-e-correção da fase 2, só que no sentido contrário → 2) estica em direção à nova opção, mudando de cor no caminho, enquanto um segundo blob ("rastro") fica preso na origem e é puxado — o filtro goo funde os dois numa ponte líquida só enquanto estão perto o suficiente → 3) tensiona: a ponte fina se rompe (o rastro encolhe a zero, a ponte desaparece sozinha quando a distância passa do alcance do blur) → 4) volta pra forma completa com um leve overshoot elástico, marcando a nova opção. Isso vale nos dois sentidos — indo ou voltando pra uma opção, a fase 1 sempre estoura antes de assentar.

Body Peptides — Yuzu / Limonada c/ Framboesa

Daily Hydration — Melancia / Jabuticaba c/ Limão

Segunda micro-interação

CTA → Carrinho — voo líquido

Ao clicar, o botão morfa de verdade (Flubber) do próprio retângulo até um círculo no centro da tela — forma, posição e tamanho tudo num morph só, com o "líquido" (estica/tensiona/rebate) vindo do easing elástico aplicado ao progresso. O texto "Item adicionado" aparece dentro do círculo, fica visível, e só depois de sumir por completo é que começa o 2º trecho: o círculo morfa de novo até o ícone do carrinho (ou o canto superior direito, se não estiver visível) e é absorvido lá.

CTAs reais do site (clique em qualquer um)

Terceira micro-interação — v2, iterando só aqui

Card → Card — troca de produto no carrinho

Réplica dos 2 cards reais do resumo do carrinho (Assinatura / Compra única — ver carrinho.html), pra testar em contexto de verdade a transição que acontece quando alguém clica "assinar" ou "comprar só uma vez" numa linha. Toda melhoria desta animação acontece só aqui — nada é portado pro carrinho.html até aprovação. Preço e link trocam junto com a conversão.

Narrativa v3 (4 fases, assimétrica de propósito): 1) saída — a forma nasce do tamanho exato da linha e vira círculo, parada (sem elástico); a linha real esmaece E se aperta junto, no mesmo ritmo — sem o aperto sobrava texto visível fora do círculo enquanto ele ainda encolhia, então fade sozinho não bastava (o aperto imita o formato real que a forma está assumindo: encolhe mais na largura do que na altura, igual ao próprio círculo nascendo) → 2) viagem — só agora, já círculo, translada até o espaço exato onde vai pousar no card de destino (medido de antemão, com a linha já convertida e escondida lá) — único trecho elástico (estica/tensiona/rebate) → 3) chegada — o círculo vira retângulo, parado, "abrindo o espaço" pro item, ainda cobrindo a linha por cima → 4) revelação — só depois de esticado por completo é que a FORMA esmaece (não a linha — ela já estava lá o tempo todo, só escondida atrás do retângulo). Sem Flubber: rect↔círculo aqui nunca muda de posição dentro da própria fase, então dá pra fazer só com width/height/border-radius.

Resumo do pedido — clique em "assinar" / "comprar só uma vez"

Assinatura

-25%
  • Body Peptides Yuzu · 1× fardo (6 latas) R$ 62,55

Compra única

  • Daily Hydration Melancia · 1× caixa (14 sachês) R$ 99,90