Laboratorio de componente
Formularios
Página de laboratorio para construir formularios reutilizables. Primero se define la estructura Astro/HTML; después se agregan estilos visuales, animaciones, efectos, estados de interacción, validaciones visuales y código generado.
Preview
Preview base de formulario
Área reservada para la vista previa base de formulario. En el siguiente ticket se colocará un formulario simple con nombre, contacto, mensaje y botón de envío.
Estilos visuales
Opciones de estilo
Opciones previstas: formulario simple, formulario glass, formulario compacto, formulario de contacto, formulario en tarjeta y formulario dividido.
Animaciones
Opciones de movimiento
Opciones previstas: entrada suave, foco progresivo, aparición de ayuda, transición de error y confirmación de envío.
Efectos
Opciones de FX
Opciones previstas: borde activo, glow de foco, fondo glass, sombra suave, profundidad y feedback visual de validación.
Estados
Estados de interacción
Estados previstos: normal, focus, error, success, disabled, required y loading.
Código generado
Combinación actual
FORM-001 + STYLE-001 + ANIM-001 + FX-001 + STATE-001El código generado se conectará cuando existan variantes seleccionables para formularios.