Cliente Proyecto concepto
Trabajo Diseño y desarrollo web
Ciclo Agosto 2026
Stack Astro · GSAP · Lenis

Una desarrolladora que no existe — y una landing que sí.

Umbral es una desarrolladora inventada; lo real es todo lo demás: la marca, los renders y una landing bilingüe en producción.

Ver el sitio en vivo umbral-mty.netlify.app

El render del hero, generado con IA bajo una dirección de arte precisa: hora azul, lluvia reciente, la sierra en neblina.

El experimento

Inventar el cliente para no inventar el estándar.

Umbral nació como pregunta: ¿cómo se vería una desarrolladora residencial de Monterrey si su web estuviera a la altura de su arquitectura? Definimos la marca desde cero — nombre, tono, paleta piedra y tinta con un acento azul acero — y una dirección de arte precisa: clima frío y húmedo, hora azul después de la lluvia, la sierra con neblina y la luz cálida del interior como único contraste.

Los renders se generaron con IA bajo esa dirección, con prompts que fijan materiales, atmósfera y encuadre: el modelo pone los pixeles; la dirección de arte la pone uno.

Versión en inglés del hero: UMBRAL LIVING sobre el mismo render en hora azul
El hero en inglés — HABITAR / LIVING.
Sección de proyectos de la landing: cards asimétricas de los desarrollos Ladera y Encino
Cuatro desarrollos ficticios, con ficha y galería propias.
El sistema

Una sola tipografía haciendo todo el trabajo.

Todo el sitio se sostiene con una familia variable y su eje de ancho: expandida en los titulares, normal en el cuerpo, condensada en las etiquetas. El titular del hero se parte en dos líneas que cambian con el idioma, y el color casi desaparece para que el peso lo carguen la escala y los renders.

Cada desarrollo ficticio tiene ficha completa — zona, tipología, superficie, entrega, amenidades — en un panel nativo del navegador, con galería y cierre con Esc: interfaz seria, sin librerías de más.

Panel del proyecto Mirador abierto sobre la landing, con galería a la izquierda y ficha técnica a la derecha
El panel de proyecto: galería, ficha técnica y precio, en un diálogo nativo.
La construcción

Estático, bilingüe y con motion de verdad.

La landing está construida en Astro con i18n nativo — / en español, /en/ en inglés, generados del mismo componente — y desplegada con integración continua. El motion corre sobre GSAP y Lenis: parallax en el hero que responde al scroll y al cursor, titulares que se revelan por palabras, contadores, y una sección de proceso que se fija en pantalla mientras avanzan los cuatro pasos de compra.

Las imágenes se optimizan en el build (AVIF y WebP responsivos) y todo respeta prefers-reduced-motion: el sitio se entiende igual sin una sola animación.

Sección de proceso fijada en pantalla: paso 01 Visita activo junto al interior de la casa muestra
Proceso de compra pinned: el paso activo y su imagen cambian con el scroll.
El resultado

En producción, en dos idiomas, en cuatro días.

La landing vive en umbral-mty.netlify.app con deploy continuo: español e inglés desde un mismo código, imágenes responsivas generadas en el build y un rendimiento que no sacrifica el motion. Un concepto inventado, ejecutado con estándares de producción.

2 idiomas
ES y EN desde un mismo código
98 / 100
Performance en Lighthouse desktop
4 días
De la idea al deploy
Ver el sitio en vivo → umbral-mty.netlify.app
Siguiente proyecto

Sana Centro Médico→

Hero del sitio de Sana Centro Médico: titular 'Medicina que te escucha' junto a la foto de un médico con estetoscopio

¿Tu proyecto necesita una web a esta altura?