Pespunte · Lab · Comercio / Configuradores de producto

Cómo se construyó Pespunte

Demo de configurador de producto para equipaciones deportivas, recreado a partir de una interfaz de referencia y rebrandeado como Pespunte. La prenda ocupa un escenario central con zoom y rotación por arrastre, mientras el panel lateral permite alternar cuatro patrones fotorealistas, elegir talla y color, añadir apellido o dorsal con tipografía y tamaño configurables, y cargar un logotipo mediante selector o arrastrar y soltar. El estado se conserva en localStorage, la combinación puede guardarse, compartirse y exportarse como PNG, y una pequeña simulación seedeada mantiene el indicador de usuarios diseñando. En un proyecto real, la misma interfaz consumiría un catálogo por API, traduciría cada zona a coordenadas de impresión o bordado y produciría un archivo técnico junto con el presupuesto y el pedido; aquí todo funciona en el navegador y sin backend.

Es una demo técnica, no una plantilla vendible tal cual: un adelanto de lo que podemos construir a medida cuando un proyecto necesita algo más que una web de catálogo. Si te interesa algo parecido para tu producto, hablamos.

Qué demuestra

• Cuatro variantes fotorealistas de polo generadas en serie con ImageGen de OpenAI y autoalojadas con fondo alfa real
• Cambio de patrón sin saltos visuales gracias a la precarga del siguiente recurso y transición de opacidad
• Escenario de producto con zoom, restablecimiento de vista y rotación limitada mediante arrastre con ratón o gesto táctil
• Personalización de apellido o dorsal con cuatro familias, tres pesos y tamaño regulable entre 12 y 38 puntos
• Carga de logotipo por selector o drag and drop, validación de tipo y límite de 4 MB, con previsualización inmediata sobre la prenda
• Selector de talla y tres acabados cromáticos, con persistencia local de la combinación elegida
• Exportación PNG renderizada en Canvas con patrón, personalización y ficha de la combinación
• Guardado en localStorage, favorito, enlace compartible y microfeedback mediante toasts accesibles
• Navegación responsive: panel de escritorio a dos columnas y flujo vertical adaptado a móvil
• Indicador de actividad simulado con generador determinista mulberry32, sin backend ni dependencias