firmaGSAP ScrollTrigger
Hilo de manjar
Un trazo grueso color manjar nace bajo el logotipo, se dibuja al bajar, hace un rizo de manga pastelera en cada sección y termina rodeando «Desde 1959».
~/portafolio/pasteleria-san-antonio$ git log --reverse
Pastelería · Prototipo · septiembre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Una pastelería limeña con nueve locales y más de sesenta años de historia. Llevamos toda su web, sus tres tiendas en línea y su carta de salón a un sitio nuevo, rápido y con una identidad que nace de su propia vitrina.
- 813fotos del cliente llevadas al sitio nuevo
- 491productos de sus tres tiendas en línea
- 301platos de salón en 36 secciones
- 830enlaces comprobados, ninguno roto
- 675páginas en el sitio nuevo
/01 El encargo
Renovar su presencia digital sin perder nada de lo construido: cada página, cada producto y cada foto, en un sitio más rápido, más claro y fiel a la marca.
- Para quién
- Familias y oficinistas de Lima Moderna que piden tortas, bocaditos y desayunos para el día o para una fecha, y empresas que piden para reuniones.
- Tarea principal
- Pedir (para hoy o programado) y ver la carta; después, encontrar el local y su horario.
- Qué investigamos
- Su Instagram y sus publicaciones recientes
- Su web actual, recorrida página por página
- Sus tres tiendas en línea y la carta de salón
- Su logotipo manuscrito, sus colores y su historia desde 1959
/02 Investigación
Antes de diseñar una sola pantalla investigamos la marca a fondo: su historia, sus símbolos, su color, su tono y a quién le habla. De ahí sale todo lo demás.
Herencia
Desde 1959 en Lima. Sus clientes no buscan novedad: buscan «los clásicos de siempre».
Su trazo
El logotipo es manuscrito, de una sola línea continua, como la manga pastelera.
Su color
Marrón chocolate sobre crema: el color de sus cajas y de su vitrina.
Su tono
Cálido y sin apuro, con el corazón marrón 🤎 que usan en todas sus redes.
Su cliente
Familias y oficinas de Lima Moderna que piden para hoy o para una fecha especial.
Referentes que analizamos
Analizamos sitios de pastelería, chocolate, café y té reconocidos por CSS Design Awards, el premio internacional de diseño web, y anotamos qué hace que cada uno venda sin dejar de ser una marca con personalidad.
Maeve Chocolate
CSS Design Awards · 2025
Convierte la marca en un mundo propio: cada producto tiene su escenario.
Jiddo Tea
CSS Design Awards · 2024
El producto es el protagonista y un trazo hecho a mano acompaña los titulares. Ahí vimos el camino para su logotipo manuscrito.
White Coffee
CSS Design Awards · 2024
Tipografía con serifa grande y fotos reales del oficio: elegancia sin adornos.
Tea Flow
CSS Design Awards · 2025
Empaque y web funcionan como un solo sistema y la compra empieza desde la portada.
GastroTools
CSS Design Awards · 2026
El oficio y los años de experiencia como el mejor argumento de venta.
Epirus Food
CSS Design Awards · 2024
La tradición contada como un recorrido, con el origen de cada producto.
La investigación, la dirección creativa, el diseño, el desarrollo y las pruebas los hicimos íntegramente en Montreach. Los referentes nos ayudan a entender el rubro; el resultado es siempre propio de cada marca.
/03 Dirección
A✓ elegida
Vitrina 1959
La web como la vitrina de la pastelería: fondo crema de caja de tortas, piezas reales presentadas como en mostrador y un hilo de manjar que se dibuja con el scroll.
B
Recetario de familia
Editorial de herencia: la historia de los fundadores como un libro de recetas, con papel, tinta sepia y línea de tiempo de los locales.
C
Mostrador digital
Funcional primero: buscador de productos con filtros, estado «abierto ahora» por local y pedido directo.
Por qué: «Vitrina 1959» resuelve la tarea principal (pedir y ver la carta) igual de bien que el mostrador digital, pero con una firma que sale de la propia marca: el trazo manuscrito del logo y la manga pastelera. El recetario de familia vive en la página de historia.
/04 Del boceto al diseño
Primero la estructura: jerarquía, bloques y recorrido, sin color ni fotos. Desliza para ver cómo esa misma estructura se convierte en la portada final.
/05 Sistema de diseño
Los colores y tipografías que salen de la marca y se usan como tokens en todo el sitio.
- Crema
#f6efe6Fondo general, como caja de pastelería - Cacao
#2b1d14Texto y botones principales - Marrón
#684a35Logotipo, cursivas y estados de botón - Manjar
#c98a4bEl hilo de la firma y subrayados - Caja
#efe4d5Superficies y botones claros - Papel
#fbf8f3Etiquetas de precio y texto sobre oscuro
Fraunces · Titulares, con cursiva
Figtree · Texto e interfaz
/06 Movimiento
Cada sitio tiene un gesto que solo puede ser suyo y nunca repetimos el de otro proyecto. Cada efecto usa la herramienta adecuada, no la de costumbre.
- Foto que se destapa como una porción de torta
WAAPI (nativo) - Etiqueta de precio que entra colgada y se balancea
WAAPI (nativo) + linear() - Reflejo de vidrio de vitrina que cruza la pieza
CSS (nativo) - Listas, tarjetas y botones que entran en cadena
WAAPI (nativo)
/07 Tecnologías
- React
v19.3Interfaz - React Router
v7.18Rutas y pre-renderizado de cada página - Vite
v6.4Compilación - TypeScript
v5.8Tipado - GSAP
v3.15Firma ligada al scroll - Lenis
v1.3Scroll suave
/08 Cómo lo hicimos
- 01
Investigación
Estudiamos su Instagram, su web, sus tres tiendas y la carta de salón: 11 páginas, 491 productos y más de 1.600 fotos.
- 02
Migración completa
Llevamos cada página, cada producto, cada local y cada foto al sitio nuevo, y comprobamos sus 830 enlaces uno por uno.
- 03
Referentes
Analizamos diez sitios premiados del rubro y de rubros cercanos para entender qué funciona en una marca con historia.
- 04
Dirección creativa
Propusimos tres caminos y elegimos «Vitrina 1959», con el hilo de manjar como gesto propio de la marca.
- 05
Diseño y desarrollo
Diseñamos y programamos el sitio completo con las fotos del propio cliente, con una página para cada producto y cada local.
- 06
Rendimiento
Lo optimizamos hasta lograr 97–100 en rendimiento y 100 en accesibilidad, buenas prácticas y SEO en sus páginas principales.
- 07
Movimiento
Ajustamos cada animación para que vaya fluida incluso en celulares de gama baja.
- 08
Pruebas
Lo revisamos en 17 tamaños de pantalla, desde celulares pequeños hasta monitores grandes.
/09 Calidad
Pruebas: 17 tamaños de pantalla, desde celulares pequeños hasta monitores grandes.
- 100Rendimiento
- 100Accesibilidad
- 100Buenas prácticas
- 100SEO
Lighthouse en móvil · mediana de 3 mediciones en la portada, octubre 2026
/10 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.