2.4 Micro-interacoes

🔮 O que sao Micro-interacoes

Micro-interacoes sao pequenos momentos de feedback que acontecem quando o usuario interage com a interface. Sao sutis, mas fazem toda a diferenca entre uma experiencia mediocre e uma excepcional.

💡 Exemplos do Dia a Dia

Botao muda de cor no hover

Feedback visual imediato de que o elemento e clicavel

Input brilha quando focado

Indica claramente onde o usuario esta digitando

Spinner durante carregamento

Comunica que algo esta acontecendo

Check verde apos sucesso

Confirma que a acao foi completada

🎯 Por que Micro-interacoes Importam

• Feedback: Usuario sabe que a acao foi reconhecida

• Orientacao: Guiam o usuario sobre o que fazer

• Humanizacao: Interface parece viva e responsiva

• Diferenciacao: Separa produtos medios de excelentes

🎯 Vibe Coding Prompt

Use: micro-interacoes sutis em todos os elementos interativos, feedback visual imediato nas acoes do usuario, interface que responde a cada clique e hover.

🖱️ Hover States

Hover states sao o feedback quando o mouse passa sobre um elemento. Usam transform, shadow e color changes para indicar interatividade.

👆 Experimente (passe o mouse)

💻 Codigo CSS

/* Transform - escala */

.btn:hover {

transform: scale(1.05);

}

/* Shadow */

.card:hover {

box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);

}

/* Color change */

.link:hover {

color: #3B82F6;

background-color: rgba(59, 130, 246, 0.1);

}

/* Translate */

.item:hover {

transform: translateY(-4px);

}

Exemplo: Card com Hover Completo

📦

Card Titulo

Passe o mouse para ver todos os efeitos combinados.

🎨

Design

Multiplos efeitos criam profundidade.

⚡

Performance

Transform e opacity sao GPU-accelerated.

🎯 Vibe Coding Prompt

Use: hover com scale(1.05) e shadow elevation, cards que sobem levemente no hover, transicao suave de 200ms em todos os hovers.

🎯 Focus States

Focus states sao essenciais para acessibilidade. Indicam qual elemento esta selecionado para navegacao por teclado. Nunca remova focus sem substituir por algo visivel.

⌨️ Experimente (use Tab para navegar)

Link Focavel

💻 Codigo CSS

/* Focus ring basico */

.input:focus {

outline: none;

ring: 2px solid #3B82F6;

border-color: #3B82F6;

}

/* Focus com offset (botoes) */

.btn:focus {

outline: none;

box-shadow: 0 0 0 2px #1f2937, 0 0 0 4px #3B82F6;

}

/* Focus-visible (apenas teclado) */

.btn:focus-visible {

outline: 2px solid #3B82F6;

outline-offset: 2px;

}

♿ Acessibilidade: Regras de Ouro

✓ SEMPRE tenha um indicador visivel de focus

✓ Use :focus-visible para mostrar focus apenas no teclado

✓ Contraste minimo de 3:1 entre focus ring e fundo

✗ NUNCA use outline: none sem substituto

🎯 Vibe Coding Prompt

Use: focus ring azul de 2px com offset, inputs com borda que muda no focus, focus-visible para navegacao por teclado acessivel.

⏳ Loading States

Loading states comunicam que algo esta acontecendo. Skeletons, spinners e progress bars previnem que o usuario pense que a interface travou.

🔄 Tipos de Loading

Spinner

Acoes rapidas

Skeleton

Carregamento de conteudo

Progress Bar

Progresso mensuravel

💻 Codigo CSS

/* Spinner */

.spinner {

width: 32px;

height: 32px;

border: 2px solid #3B82F6;

border-top-color: transparent;

border-radius: 50%;

animation: spin 1s linear infinite;

}

/* Skeleton shimmer */

.skeleton {

background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);

background-size: 200% 100%;

animation: shimmer 1.5s infinite;

}

/* Keyframes */

@keyframes spin {

to { transform: rotate(360deg); }

}

@keyframes shimmer {

0% { background-position: -200% 0; }

100% { background-position: 200% 0; }

}

Quando Usar Cada Tipo

• Spinner: Acoes rapidas (< 3s), submissao de forms, clique em botoes

• Skeleton: Carregamento de paginas, listas, conteudo estruturado

• Progress: Upload de arquivos, processos longos com etapas conhecidas

🎯 Vibe Coding Prompt

Use: skeleton loading com shimmer effect para cards, spinner circular nos botoes durante submit, progress bar para uploads com porcentagem.

🎬 Transicoes CSS

Transicoes suavizam mudancas de estado. Definem transition-property, duration e easing function para criar movimentos naturais e agradaveis.

⏱️ Duracoes (passe o mouse)

75ms

Micro

150ms

Rapido

300ms

Normal

500ms

Lento

📈 Easing Functions

ease-in-out

Comeca e termina devagar. Mais natural.

ease-out

Comeca rapido, termina suave. Para entradas.

ease-in

Comeca suave, termina rapido. Para saidas.

linear

Velocidade constante. Para spinners.

💻 Codigo CSS

/* Sintaxe basica */

.element {

transition: property duration easing delay;

}

/* Exemplo pratico */

.btn {

transition: all 200ms ease-in-out;

/* ou especificamente: */

transition: background-color 200ms ease-in-out,

transform 200ms ease-out,

box-shadow 300ms ease-in-out;

}

/* Tailwind classes */

transition-all duration-200 ease-in-out

transition-colors duration-150

transition-transform duration-300

🎯 Vibe Coding Prompt

Use: transition-all de 200ms ease-in-out nos hovers, ease-out para elementos entrando na tela, duracoes entre 150ms e 300ms para microinteracoes.

✅ Feedback de Acao

Feedback de acao comunica o resultado de interacoes. Success, error e warning states usando cores, icones e mensagens consistentes.

🚦 Estados de Feedback

Sucesso!

Suas alteracoes foram salvas com sucesso.

Erro!

Nao foi possivel completar a acao. Tente novamente.

Atencao!

Esta acao nao pode ser desfeita.

Informacao

Novos recursos disponiveis nesta versao.

💻 Codigo CSS

/* Success state */

.alert-success {

background: rgba(34, 197, 94, 0.1);

border: 1px solid rgba(34, 197, 94, 0.3);

color: #4ade80;

}

/* Error state */

.alert-error {

background: rgba(239, 68, 68, 0.1);

border: 1px solid rgba(239, 68, 68, 0.3);

color: #f87171;

}

/* Warning state */

.alert-warning {

background: rgba(234, 179, 8, 0.1);

border: 1px solid rgba(234, 179, 8, 0.3);

color: #facc15;

}

Validacao em Inputs

Input Valido

Input Invalido

Por favor, insira um email valido.

🎯 Vibe Coding Prompt

Use: toast notifications para sucesso e erro, validacao inline em inputs com cores semanticas, icones de check e X para feedback visual imediato.

📝 Resumo do Modulo

✓

Micro-interacoes - Pequenos feedbacks que humanizam a interface

✓

Hover States - Transform, shadow e color changes para indicar interatividade

✓

Focus States - Essenciais para acessibilidade e navegacao por teclado

✓

Loading States - Skeletons, spinners e progress para comunicar espera

✓

Transicoes CSS - Property, duration e easing para movimentos naturais

✓

Feedback de Acao - Success, error, warning com cores e icones semanticos

Proximo Modulo:

2.5 - Motion Design para Web: Animacoes que encantam e guiam

← Modulo Anterior Proximo Modulo →