ORIVA: concepto de tienda de audio con sala de escucha y pago en tres pasos

VITON¹³ crea sitios conceptuales para mostrar su alcance en sectores donde aún no tiene un proyecto de cliente que enseñar. ORIVA es uno de ellos: la tienda online de un taller acústico ficticio que vende auriculares, altavoces, amplificadores, vinilos y accesorios. La marca, los productos, los precios y las boutiques son inventados, y el sitio está en ruso.

La tienda tenía que funcionar de principio a fin, no solo parecer de gama alta. Quien compra debe poder acotar el catálogo, elegir un color en la ficha, aplicar un código promocional, completar un pago que valida cada campo y ver la confirmación del pedido. Quien aún no quiere comprar debe poder encontrar una boutique y reservar una sesión de escucha.

18 páginas: portada, catálogo, producto, carrito, pago, confirmación del pedido, cuenta, favoritos, revista, boutiques, taller, envíos, soporte, contacto, privacidad, condiciones, cookies y una 404. El catálogo reúne 13 productos y los filtra por categoría, precio, color y etiquetas, con orden y chips que muestran los filtros activos. La ficha de producto tiene galería con lightbox, color y cantidad, acordeones, reseñas y productos relacionados.

El carrito acepta 2 códigos promocionales de demostración y muestra una barra de progreso hasta el envío gratuito desde 30 000 rublos, un umbral de demostración. El pago tiene tres pasos con validación: contacto, envío y pago. La cuenta de demostración incluye acceso y registro, pedidos, favoritos, direcciones y garantías. Las boutiques de 6 ciudades aparecen en un mapa interactivo con filtro por ciudad y reserva de una sesión de escucha.

La sala de escucha es un reproductor dibujado como un disco que gira bajo su brazo: una lista de 5 pistas, barra de avance, volumen y paso automático a la siguiente. Las pistas, unos 16 MB en total, se alojan en el propio sitio con licencia de Pixabay. La revista, la página de envíos, pagos y devoluciones, las preguntas frecuentes de soporte y las páginas legales completan el conjunto.

La portada se abre con un vídeo a pantalla completa y sigue como un relato al hacer scroll, con contadores. La animación usa GSAP con ScrollTrigger y el desplazamiento suave de Lenis, con curvas de movimiento suaves. El recorrido clave es catálogo, producto y pago: el carrito se abre como un panel lateral, la búsqueda como una capa superpuesta y en la primera visita aparece un aviso de cookies.

El sitio está hecho con HTML, CSS y JavaScript sin paso de compilación. La cabecera, el pie y las capas superpuestas salen de un único script compartido, así que todas las páginas son idénticas. Las cuentas, los carritos y las reservas se guardan en el localStorage del navegador y no se envía nada a ninguna parte. El mapa usa Leaflet con teselas de OpenStreetMap/CARTO; las fotos son de stock de Unsplash y el vídeo, de Pexels, ambos cargados por enlaces directos a su CDN.

Hoy existe un concepto que funciona: 18 páginas, 13 productos, boutiques en 6 ciudades y una sala de escucha con 5 pistas, utilizable del catálogo a la confirmación del pedido sin servidor. Las comprobaciones del 22 de septiembre de 2026 en 17 páginas encontraron un H1 en cada una, texto alternativo en el 100 % de las imágenes y 0 enlaces internos rotos.

Lighthouse dio a la portada SEO 100 y accesibilidad 99 tanto en móvil como en escritorio, y un rendimiento de 97 en escritorio frente a 66 en móvil. Lo que frena la nota móvil es el peso: la página envía 12,8 MB al teléfono, con un vídeo de portada en Full HD e imágenes, y el LCP llega a 7,3 s.

ORIVA es un concepto creado por VITON¹³ para mostrar su alcance, no un encargo. El taller, sus productos, precios, reseñas y boutiques son ficticios. El sitio no tiene dominio, visitantes, tráfico de búsqueda ni ventas, así que no demuestra nada sobre conversión ni ingresos. Las fotos y los vídeos son material de stock con licencia de Unsplash y Pexels.

Las cifras de Lighthouse son mediciones de laboratorio de la portada en un solo día, no datos de usuarios reales. Un 100 en SEO cubre solo lo básico: faltan canonical, Open Graph, JSON-LD, sitemap.xml y robots.txt. El pago no cobra nada ni envía datos: los pedidos y las cuentas solo existen en el navegador de quien visita.