firmaOGL (WebGL, shader propio)
Alanya se lee en capas
El scroll da vueltas de laminado a la foto real de sus croissants: 3, 9, 27, 81 y 243 capas, con la línea de mantequilla encendida por el cursor, el dedo o el giroscopio.
~/portafolio/alanya$ git log --reverse
Pastelería / bollería · Propuesta · octubre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Una repostería de autor de Barranco que solo existía en Instagram. Le hicimos su primera web: una vitrina de 35 piezas, sus siete sedes con horario en vivo y encargos por WhatsApp, con una portada que lamina la masa mientras bajas.
- 50páginas, su primera web propia
- 35piezas en la vitrina con su ficha
- 7sedes con horario en vivo
- 0,29 MBpara abrir la portada
- 243capas en el laminado de la portada
/01 El encargo
Darle a Alanya su primera web propia: ordenar su catálogo y sus sedes, hoy dispersos en Instagram, y facilitar el encargo sin perder el carácter de su vitrina.
- Para quién
- Vecinos de Barranco y Surco y amantes de la alta pastelería que buscan su croissant, encargan para una fecha y quieren saber qué sede está abierta.
- Tarea principal
- Ver la vitrina, encontrar la sede abierta y encargar por WhatsApp.
- Qué investigamos
- Su Instagram: 176 publicaciones y la destacada de horarios
- Entrevistas y notas de prensa sobre la chef
- 390 fotos y 50 videos propios de la marca
- Su logotipo en capas: A · la · nya
/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.
Su oficio
La bollería laminada: más de veinte versiones de croissant, masa y mantequilla en capas.
Su logotipo
Ya viene laminado, A · la · nya, y lo tomamos como la idea central del sitio.
Su vitrina
En sus locales las creaciones no llevan nombre: se descubren mirando. La web hace lo mismo.
Su cliente
Vecinos de Barranco y Surco que van por su croissant y encargan para una fecha especial.
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 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.
/04 Sistema de diseño
Los colores y tipografías que salen de la marca y se usan como tokens en todo el sitio.
- Hueso
#ECE9E3Fondo principal - Cacao
#3A2419Texto y bandas oscuras - Mantequilla
#E7C873La línea entre capas y los acentos - Frambuesa
#8E1F2CPaleta de ingrediente - Pistacho
#BCC88CPaleta de ingrediente
Fraunces · Titulares
IBM Plex Mono · Texto, etiquetas y el logotipo laminado
/05 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.
- Vitrina sin nombres: etiqueta de papel que se levanta y revela la pieza
GSAP + CSS 3D - El color de todo el sitio cambia con cada ingrediente
GSAP ScrollTrigger - Máquina de escribir con los 10 aprendizajes de la chef
JS propio - La foto de la tarjeta se transforma en la de la ficha
View Transitions (nativo) - Titulares que se revelan letra por letra
CSS (nativo) - Scroll suave
Lenis
/06 Tecnologías
- Vite50 páginas prerenderizadas
- OGL
v1.0El laminado en WebGL del hero - GSAP
v3.15Vitrina, ingredientes y revelados - Lenis
v1.3Scroll suave - View TransitionsDe la tarjeta a la ficha
- NetlifyAlojamiento y formulario de contacto
/07 Cómo lo hicimos
- 01
Investigación
Recorrimos su Instagram, su prensa y sus siete sedes, y clasificamos cada dato con su fuente.
- 02
Concepto
Su logotipo ya estaba laminado: convertimos el scroll en las vueltas de laminado de la masa.
- 03
Referentes
Estudiamos a Apple, Locomotive, Aesop y una croissantería de referencia mundial, y tomamos una idea de cada uno.
- 04
Diseño y desarrollo
Programamos 50 páginas: carta con buscador, 35 fichas, 7 sedes con «abierto ahora», bolsa y encargos.
- 05
Movimiento
El laminado en WebGL, la vitrina con etiquetas que se levantan y un color por ingrediente, con versión para movimiento reducido.
- 06
Rendimiento
La portada pesa 0,29 MB al abrir y obtiene 98 en rendimiento y 100 en accesibilidad, buenas prácticas y SEO.
- 07
Pruebas
Probamos 50 rutas en Chrome, Safari y Firefox: 0 errores, 0 enlaces rotos y 0 problemas de accesibilidad.
/08 Calidad
Pruebas: 50 rutas en Chrome, Safari y Firefox, con teclado y movimiento reducido.
- 98Rendimiento
- 100Accesibilidad
- 100Buenas prácticas
- 100SEO
Lighthouse en móvil · mediana de 3 mediciones en la portada, octubre 2026
/09 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.