Landing page caprichada, passo 2: detalhes de UI premium

Especificação de Qualidade de UI

A "sensação premium" de uma interface vem de parâmetros de detalhe quantificáveis. Siga esta especificação ao escrever estilos e animações; em caso de conflito com design tokens existentes do projeto / tema do AntD, o projeto tem precedência. Temas duais devem ser implementados com variáveis CSS no escopo html[data-theme], nunca use light-dark() (armadilha de compatibilidade com kernels antigos).

I. Leis de Ferro da Qualidade

1. Camadas sem bordas: Use diferenças de 1%–3% na luminosidade de fundo para expressar camadas, proibido preto puro #000.
   • Claro: fundo da página #f5f5f3 / cartão #fcfcfb; Escuro: #0b0b0a / #151515 / #1a1a19 / #20201e (escada de profundidade do mais escuro ao mais claro)
   • Projetos AntD alinhem com tokens (colorBgLayout/colorBgContainer), não escreva valores fixos em cada lugar.
2. Foco com sombra, não outline: Input/cartão em foco use box-shadow duplo (anel interno com cor sólida + anel externo com brilho da cor primária de baixa opacidade) para criar "sensação de encaixe"; remova outline padrão, mas mantenha :focus-visible visível.
3. Compensação de peso da fonte no modo escuro: No modo escuro, reduza o peso da fonte em um nível (400→300, fontes variáveis podem ir a 360 precisamente), para neutralizar o efeito de "engordamento" do texto branco; alterne com variáveis CSS conforme o tema.
4. Digitação em fluxo com efeito de aquarela: 90ms por caractere, transição de blur(6px) + semitransparente para nítido, easing cubic-bezier(.215,.61,.355,1), caracteres adjacentes com 30ms de atraso; proibido saltos abruptos caractere por caractere ou aparecimento instantâneo de blocos.
5. Alinhamento de ícones inline: vertical-align: -0.125em, ou use flex + align-items: center para agrupar.
6. Antirrebote de números: Números de estatísticas/tempos/preços sempre com font-variant-numeric: tabular-nums, largura não salta ao atualizar ou alterar.
7. Colapso suave: Animação de altura sem calcular altura com JS, use display: grid + transição grid-template-rows: 0fr → 1fr (com overflow: hidden na camada interna).
8. Evitar órfãs de texto: Parágrafos com text-wrap: pretty, títulos com text-wrap: balance.
9. Animações com personalidade:
   • Arrastar/encaixe/posicionamento: mola superamortecida (stiffness 1200 / damping 80) ou cubic-bezier(.2,0,0,1), zero oscilação, trava imediatamente.
   • Curtir/marcação/feedback de sucesso: subamortecida (380 / 18), uma pequena oscilação, "quentinha".
   • Entrada 150–250ms, saída 100–150ms, rápido e contido.
10. Autodesligamento de feedback: Feedback temporário como cópia/salvamento exibe por 2–2.5s e depois desaparece automaticamente, não espere o usuário fechar manualmente.

II. Lista de Verificação de Sensação Barata (Autoverificação)

Se qualquer item aparecer, refaça:

• Dividir todas as áreas com bordas de 1px; fundo preto puro ou branco puro em grande área.
• Outline azul padrão do navegador em foco.
• Usar peso da fonte do modo claro no modo escuro (texto branco "engorda").
• Saída em fluxo com saltos caractere por caractere ou aparecimento instantâneo de blocos.
• Números saltam ao alterar; todas as animações compartilham o mesmo easing, sem personalidade de velocidade.
• Feedback temporário nunca desaparece, precisa fechar manualmente.
• Decoração sem informação: cabeçalhos em ALL-CAPS, strings separadas por ponto médio, sufixo → em botões, gradientes em todo lugar.

III. Limites de Seleção de Componentes (Camadas de Sobreposição e Feedback)

Cenário	Usar	Pontos-chave
Navegação de conteúdo em meia tela inferior, ajustável por arrasto (mobile)	Bottom Sheet (AntD Drawer placement="bottom")	Gesto com amortecimento, encaixe por níveis, três alturas peek/half/full ≈ 25/50/90%
Seleção de poucas ações mutuamente exclusivas (mobile)	Action Sheet	Botões planos, item de cancelamento separado, ações perigosas em vermelho e separadas do cancelamento
Dica leve após ação, pode desfazer	Snackbar (AntD message + botão desfazer)	Barra inferior, desaparece automaticamente com tempo limite, desfazer deve reverter a ação de verdade
Confirmação de alto risco/bloqueio	AlertDialog (AntD Modal)	Bloqueio de fundo travado; apenas ações irreversíveis desabilitam Esc, o resto mantém
Novo recurso/guia para iniciantes	Tour (AntD Tour)	Destaque de localização + passo a passo, pode pular
Ampliação de imagem/mídia	Lightbox (antd-image ou personalizado)	Zoom com rolagem, fechar com Esc
Validação de campo de formulário	Inline Alert (AntD Form validação)	Texto vermelho abaixo do input, validação imediata, some ao corrigir; não use message global para erros de campo

Nível de bloqueio do menor para o maior: Snackbar < Inline Alert < Sheet < Action Sheet < Dialog. Desktop priorize Modal/message, mobile priorize família Sheet; em dúvida, escolha o de menor bloqueio.

IV. Biblioteca de Personalidade de Animações (Use conforme necessário, não acumule todas)

• Botão de feedback de conclusão: Ao clicar, encolhe em círculo → traço de visto desenha → partículas explodem, 300–400ms
• Seleção vinculada: Selecionar → anel de progresso cresce + número rola + fundo do topo muda conforme progresso
• Cartões empilhados expandindo: Cartões se expandem sequencialmente (cada um com atraso de 50ms), ao clicar novamente, recolhem empilhados
• Cartão de encaixe com linha de desenho: Deslizar horizontalmente, soltar encaixa na posição mais próxima (mola 1200/80); ao trocar, linha temporal desenha com stroke-dashoffset segmento por segmento
• Rolagem inercial: Picker gira com inércia → desacelera → encaixa na escala; se passar, volta com oscilação (subamortecida 380/18)
• Transição de expansão circular: A partir do ponto de toque do dedo/cursor, expande com clip-path: circle() até preencher, 400–500ms

Implemente priorizando CSS transition/animation e Web Animations; parâmetros de mola seguem semântica do framer-motion (stiffness/damping); todas as animações devem ter degradação prefers-reduced-motion (apenas alternar diretamente/desvanecer).

V. Autoverificação de Entrega

• Camadas por diferença de cor, sem fundo preto puro/branco puro, sem divisão com bordas completas
• Foco de teclado visível (sombra dupla), alvos de toque ≥ 44px
• Peso da fonte compensado no modo escuro
• Números com tabular-nums; parágrafos com text-wrap: pretty
• Animações com duas personalidades, duração dentro do intervalo especificado; prefers-reduced-motion com degradação
• Feedback temporário desaparece em 2–2.5s; erros de formulário vão para dica inline

Fontes

Parâmetros extraídos de três vídeos no Douyin (2026-10): Ludi "Desvendando o código-fonte do cliente de IA de grandes empresas, qualidade depende desses 5 truques" "6 componentes secretos matadores", Xigua Tongxue "Episódio 14: 6 interações para deixar o App feito por IA mais refinado".