Usamos cookies para melhorar sua experiência.

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)

Hero Home

Priority loading + aspect ratio fixo

Card Image (4:3)

Pet Food

Lazy loading + object-fit cover

Como funciona:

  1. Mostra versão low-res desfocada (blur 20px) instantaneamente
  2. Carrega imagem HD em background
  3. Faz fade suave (500ms) da low-res para HD
  4. 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