Animated Fluid Modal

El Arte del Diálogo

Un modal no debe aparecer de golpe; debe “crecer” en la pantalla para dar contexto al usuario. El Animated Fluid Modal utiliza transiciones de escala cubic-bezier para una sensación de fluidez y ligereza.

Características

• Backdrop Blur: El fondo se desenfoca suavemente para centrar la atención en el mensaje.
• Entrada Suave: Animación de escala de 0.9 a 1.0 con opacidad progresiva.
• Botón de Cierre Integrado: Una “X” elegante y fácil de pulsar.
• Layout de Conversión: Optimizado para mostrar un título claro, descripción y una acción principal (CTA).

Código del Componente

<div class="modal-overlay">
  <div class="modal-content">
    <h3>¡Bienvenido de nuevo!</h3>
    <p>¿Estás listo para llevar tus proyectos al siguiente nivel?</p>
    <button class="cta-btn">Empezar</button>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-content {
  background: white;
  padding: 3rem;
  border-radius: 2.5rem;
  box-shadow: 0 50px 100px -20px rgba(0,0,0,0.3);
  transform: scale(1);
  animation: modal-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modal-in {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
</style>