Laboratorio de componente
Tarjetas
Página de laboratorio para construir tarjetas reutilizables. Primero se define la estructura Astro/HTML; después se agregan estilos visuales, animaciones, efectos, estados de interacción y código generado.
Preview
Preview base de tarjeta
Área reservada para la vista previa base de tarjeta. En el siguiente ticket se colocará una tarjeta de ejemplo antes de aplicar estilos, animaciones o efectos.
Estilos visuales
Opciones de estilo
Opciones previstas: card simple, card glass, card de precio, card de servicio, card con imagen y card horizontal.
Animaciones
Opciones de movimiento
Opciones previstas: entrada suave, lift, tilt sutil, aparición por scroll y desplazamiento de contenido.
Efectos
Opciones de FX
Opciones previstas: glow, reflejo premium, borde luminoso, profundidad, blur y liquid glass.
Estados
Estados de interacción
Estados previstos: normal, hover, focus, selected, disabled, destacado y loading.
Código generado
Combinación actual
CARD-001 + STYLE-001 + ANIM-001 + FX-001 + STATE-001El código generado se conectará cuando existan variantes seleccionables para tarjetas.