Demonstração de Componentes DRY
Validação visual das micro-interações e blur-up effect
AnimatedButton - Micro-interações
Efeitos: scale on hover, glow, ripple effect, active state
Variantes
Níveis de Glow
Tamanhos
Com Ícones
Sem Ripple Effect
BlurUpImage - Blur-up Effect Progressivo
Carregamento progressivo: low-res blur → HD suave
Hero Image (16:9)
Priority loading + aspect ratio fixo
Card Image (4:3)
Lazy loading + object-fit cover
Como funciona:
- Mostra versão low-res desfocada (blur 20px) instantaneamente
- Carrega imagem HD em background
- Faz fade suave (500ms) da low-res para HD
- Aspect ratio fixo previne layout shift (CLS = 0)
📋 Instruções de Teste
- ✅ AnimatedButton: Passe o mouse e clique nos botões para ver scale, glow e ripple
- ✅ BlurUpImage: Recarregue a página (Ctrl+R) para ver o blur-up effect
- ✅ Network throttling: Abra DevTools → Network → Slow 3G para ver efeito mais claro