Anaquel · Lab · Comercio / Interacción

Cómo se construyó Anaquel

Un anaquel horizontal de producto con lo que casi siempre falta en los carruseles hechos con prisa: la rueda vertical del ratón se convierte en desplazamiento lateral, el arrastre suelta con inercia calculada a partir de la velocidad real del puntero y se frena con rozamiento por fotograma, y una barra fina de progreso traduce la posición del scroll a un pulgar que recorre la pista. Las fichas entran escalonadas cuando la sección aparece en pantalla, los bordes se colapsan con un margen negativo de un píxel para que el conjunto se lea como una estantería continua, y las dos pestañas cambian de catálogo entero volviendo a lanzar la entrada. Los mandos permiten apagar la inercia, activar el imán a tarjeta o desactivar la rueda para comparar contra el comportamiento por defecto.

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

• Arrastre con Pointer Events y captura de puntero: velocidad medida con media exponencial (0,7/0,3) para quitar el ruido del ratón sin retrasar la lectura
• Inercia al soltar con rozamiento por fotograma (0,94 normalizado a 16,67 ms), independiente de la tasa de refresco del monitor
• Rueda vertical convertida en desplazamiento horizontal con listener no pasivo, respetando el gesto lateral del trackpad
• Imán opcional a tarjeta con scroll-snap-type, para comparar contra el desplazamiento libre
• Barra de progreso del spec: pulgar de ancho fijo del 30 % movido por translateX = avance × (100 / 0,3)
• Entrada escalonada con IntersectionObserver a umbral 0,1 y retardo 200 + índice × 80 ms, tal cual el spec
• Bordes colapsados con margin-left: -1px (y first-child a 0) para que la fila se lea como una estantería continua
• Pestañas que cambian el catálogo entero y recrean el punto activo como nodo nuevo, para que la animación scale-in con cubic-bezier(.34, 1.56, .64, 1) vuelva a dispararse
• Lectura en vivo de scrollLeft, porcentaje de avance y velocidad en píxeles por segundo
• Anchos del spec respetados: 260 px en móvil, 280, 300 y calc(25% - 1px) en escritorio
• Cuatro fotos de producto autoalojadas y reducidas a 900 px de alto (36–47 KB cada una)
• Cero dependencias: el spec pedía React y Tailwind