Mercer

Mercer es una plantilla de storefront DTC en light mode para retail boutique, la calma de un concept store premium, con mucho espacio negativo y fotografía de producto a gran escala. Nueve rutas cubren el lookbook del home, un catálogo filtrable, páginas de detalle de producto, landings de colección, un journal, about, contacto y un 404. Su firma es la grilla “shelf”: cada producto se apoya en una línea base hairline visible con un número de catálogo (01, 02, 03…) en versalitas de tracking amplio. El hero es un lookbook unfold, una foto a sangre completa se reduce y encaja en la primera celda de un rail horizontal de colecciones mientras GSAP ScrollTrigger hace pin de la sección y convierte el scroll vertical en horizontal. El carrito completo corre sobre un store en localStorage: drawer lateral, steppers de cantidad, barra de progreso de envío gratis a $75 y quick-add desde la grilla.

Qué incluye

• 9 rutas, Inicio, Shop, Detalle de Producto, Colección, Journal, Artículo de Journal, About, Contacto, 404
• Hero lookbook-unfold, GSAP ScrollTrigger hace pin de la sección y encaja la foto del hero en un rail de colecciones con scroll horizontal
• Grilla “shelf”, línea hairline superior, número de catálogo y nombre de producto kerneado en cada card
• Sistema de carrito completo sobre un store en localStorage, drawer lateral, steppers de cantidad, subtotal y estado de carrito vacío
• Barra de progreso de envío gratis con umbral de $75 y animación al desbloquearlo
• Filtro y orden del shop que reacomoda la grilla con GSAP Flip, más quick-add y estado de filtro vacío

La firma

El home abre con un lookbook unfold: GSAP ScrollTrigger hace pin del hero y la foto a sangre completa se reduce al 42% hasta encajar en la primera celda del rail de colecciones destacadas, y el rail luego se desplaza en horizontal, scroll vertical convertido en horizontal dentro de un solo pin. Por debajo de todo corre la grilla “shelf”: una línea base hairline sobre la que se apoyan físicamente cada producto, card de colección y bloque editorial, numerados como en un catálogo de boutique. En mobile el pin se elimina por completo a favor de un hero editorial limpio y un carrusel swipeable nativo.

Verlo en vivo

La demo es pública: https://fpsjago.github.io/Mercer/. 9 páginas, hecha con Astro 6, React 19, TypeScript, Tailwind CSS v4, GSAP, Lenis.