Keyboard Builder | Configurador E-commerce Interactivo
Una experiencia de compra inmersiva que permite a los usuarios personalizar productos y visualizar cambios en tiempo real con animaciones fluidas.
Más allá del carrito de compras
Generative UIEn el e-commerce moderno, una foto estática ya no es suficiente. Los usuarios quieren sentir que están construyendo algo único. El desafío de este proyecto fue crear una herramienta que cerrara la brecha entre la imaginación del cliente y el producto final.
En lugar de cargar 100 imágenes diferentes para cada combinación posible de colores, decidí construir el producto visualmente usando código.
"Crear un 'Gemelo Digital' del producto que reaccione instantáneamente a cada decisión del usuario, calculando precios y estética en tiempo real sin recargas."
El resultado es un configurador altamente performante donde el teclado se "dibuja" en el navegador usando CSS Grid y Framer Motion, permitiendo transiciones suaves que serían imposibles con imágenes tradicionales.
Ingeniería Visual y Lógica
Lógica de Precios Atómica
Calcular el precio final sumando componentes base + extras variables puede volverse caótico si se maneja en el componente visual.
Centralización de la lógica. El store recalcula el total automáticamente con cada selección, garantizando integridad de datos.
UI Generativa vs Imágenes
Usar imágenes PNG para cada combinación de colores (Case + Keycaps + Switches) requeriría cientos de archivos y tiempos de carga lentos.
El teclado es un componente React complejo renderizado con CSS. Cambio de colores instantáneo con peso cercano a cero.
Micro-interacciones Premium
En un configurador de lujo, los cambios bruscos rompen la inmersión. Necesitaba que los colores se "fundieran" suavemente al cambiar.
Implementación de AnimatePresence y transiciones de color interpoladas para dar una sensación táctil y fluida a cada clic.
Próximos Pasos
Este configurador establece la base para una plataforma de e-commerce "Headless" totalmente personalizada.