firmaView Transitions (nativo)
m· build
El «·» del logo es el cursor de un terminal: en cada cambio de página aparece «m· build ✓ N ms» con el tiempo real de la navegación.
~/portafolio/montreach$ git log --reverse
Tecnología / agencia · En producción · septiembre 2026
Hecho por MontreachInvestigación de marcaDirección creativaDiseño UX/UIDesarrolloPruebas
Nuestro propio sitio. Lo diseñamos para que demuestre cómo trabajamos en lugar de solo contarlo: textos que compilan, fotografía de Lima y una firma que mide en tiempo real cada cambio de página.
- 10agencias premiadas analizadas
- 18rondas de revisión hasta cero detalles
- 30fotografías de Lima y del oficio
- 13dispositivos en cada prueba
- 3navegadores: Chrome, Safari y Firefox
/01 El encargo
Que nuestra web sea la prueba de lo que hacemos: ingeniería visible, rendimiento medible y una identidad que se reconozca a primera vista.
- Para quién
- Empresas que buscan un socio de ingeniería de software en Lima: sitios, plataformas a medida, experiencia de usuario e inteligencia artificial.
- Tarea principal
- Entender qué hacemos y escribirnos con un proyecto.
- Qué investigamos
- Nuestro sitio anterior, guardado íntegro para comparar
- Nuestra marca: el nombre, el punto del logotipo y la ingeniería como oficio
- Lima como ciudad base
- Las agencias de diseño más premiadas del mundo
/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.
Nuestro oficio
Ingeniería de software: lo que nos distingue es construir, así que la web tenía que comportarse como un programa.
El punto
El punto rojo del logotipo pasó a ser el cursor de una terminal, que parpadea en todo el sitio.
Nuestro tono
Directo y técnico, sin adornos: tinta, papel y un solo azul de acento.
Nuestra ciudad
Lima en cada foto y la hora real de Lima en la portada.
Referentes que analizamos
Analizamos diez agencias y estudios reconocidos por CSS Design Awards entre 2024 y 2026 para entender cómo una agencia demuestra su capacidad sin decirlo.
Emotion Agency
CSS Design Awards · 2026
Muestran sus proyectos numerados con su ficha técnica: orden y transparencia.
We are Büro
CSS Design Awards · 2025
Un titular con un dato exacto genera más confianza que cualquier adjetivo.
TRIONN
CSS Design Awards · 2026
Las cifras concretas aparecen antes del formulario de contacto.
Immersive Garden
CSS Design Awards · 2024
Una década de trabajo contada con el scroll, escena tras escena.
Utsubo
CSS Design Awards · 2025
La tecnología en tiempo real como prueba de capacidad técnica.
Studio—CC
CSS Design Awards · 2025
Tipografía mínima y un solo gesto visual fuerte.
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
Compilado
La web se comporta como un build: registros de terminal en las transiciones, texto que se resuelve carácter a carácter, fotos a sangre con corte diagonal e índices /01.
B
Órbita
Una escena WebGL de partículas que reacciona al scroll.
C
Lima en tiempo real
Editorial, con mucha fotografía latinoamericana, la hora de Lima en vivo y casos contados como historias.
Por qué: «Compilado» demuestra la ingeniería en vez de contarla. «Órbita» pesaba y gastaba batería en el celular, y dejaba poco sitio a la fotografía; de «Lima en tiempo real» tomamos la carga fotográfica y la hora y coordenadas de Lima en la portada.
/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.
- Papel
#f3f5f7Fondo general - Tinta
#0a0e13Texto y secciones oscuras - Azul
#2254d6Acento principal - Rojo
#ff4b3eAcento puntual - Gris
#56616eTexto secundario - Línea
#dce2e8Bordes y separadores
Syne · Titulares
DM Sans · Texto
JetBrains Mono · Índices, etiquetas y registros de terminal
/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.
- Titular que se descifra con glifos de terminal
JS propio - Lente líquida con ondas y aberración cromática sobre las fotos
WebGL propio - Manifiesto que se enciende palabra a palabra
GSAP - Tarjetas de casos que se apilan con el scroll
CSS (nativo) - Hora y coordenadas reales de Lima
JS propio - Botón de WhatsApp con anillo en órbita
CSS (nativo)
/07 Tecnologías
- React
v19.2.4Interfaz y pre-renderizado de cada ruta - Vite
v6.2Compilación - React Router
v7.13Rutas y View Transitions - GSAP
v3.15.0Coreografía ligada al scroll - Lenis
v1.3Scroll suave - NetlifyAlojamiento y dominio
/08 Cómo lo hicimos
- 01
Punto de partida
Guardamos el sitio anterior completo para poder comparar cada mejora.
- 02
Referentes
Analizamos diez agencias premiadas y extrajimos ocho principios propios.
- 03
Dirección creativa
Propusimos tres caminos y elegimos «Compilado», con la fotografía de «Lima en tiempo real».
- 04
Fotografía
Seleccionamos 30 fotografías de alta resolución, una por sección, y las optimizamos en cuatro tamaños.
- 05
Diseño y desarrollo
Cada página se entrega ya construida para cargar al instante, con fuentes propias y accesibilidad 100.
- 06
Revisión
Revisamos 22 páginas en escritorio y en móvil, en 18 rondas, hasta no encontrar ningún detalle.
- 07
Lanzamiento
Lo publicamos en montreach.com con dominio propio y certificado de seguridad.
- 08
Movimiento
Añadimos la coreografía y la medimos en procesadores lentos hasta lograr 60 cuadros por segundo.
- 09
Pruebas y documentación
Lo probamos en 13 dispositivos y tres navegadores, y documentamos todo el proceso.
/09 Calidad
Pruebas: 13 dispositivos × 10 páginas en Chrome, Safari y Firefox.
/10 Pantallas
~/siguiente-paso$ montreach contact
Cuéntanos qué necesitas y te proponemos un primer paso concreto.