LSM Arquitectura
Web a medida para el estudio de la arquitecta Lucía Serrano Morales, con el banner construido en vídeo ligado al scroll.
Cómo funciona
Al entrar, el vídeo del teatro auditorio de Siles se construye en pantalla completa desde el solar vacío hasta el edificio terminado e iluminado, avanzando y retrocediendo según el visitante baja o sube con el scroll.
El recorrido 'Imaginar, construir, lograr' atraviesa cada imagen del proceso (boceto, planos, obra, materiales, casa terminada) sin cortes, como si la cámara entrara en la siguiente foto.
Los proyectos se muestran en tarjetas en blanco y negro que se expanden y recuperan el color al pasar el cursor por encima.
El formulario de contacto abre directamente el correo del visitante con el mensaje ya redactado, sin pasar por ningún backend propio.
Capturas
Portada con vídeo de la obra
Cita del estudio
Recorrido Imaginar, construir, lograr
Proyectos en tarjetas
Galería en movimiento
El reto
El estudio solo tenía material pensado para Instagram (fotos y piezas de 1080 px con texto encima) y necesitaba una web propia que transmitiera su forma de trabajar, de la primera idea a la obra terminada, con una imagen cuidada y coherente con su marca.
El enfoque
Una página de inicio con el estilo editorial de la marca (tonos piedra, tipografía serif, mucho aire) y animaciones ligadas al scroll que cuentan el proceso de construir, con un único objetivo en toda la web: contactar con el estudio.
El resultado
Una web rápida y elegante que enseña el oficio del estudio del boceto a la obra terminada, con modo claro y oscuro automático y lista para funcionar igual de bien en móvil que en ordenador.
Tecnologías usadas
- Next.js
- TypeScript
- Tailwind CSS
- GSAP
- Vercel
Retos técnicos resueltos
Vídeo distinto según la pantalla: una versión vertical 9:16 para móvil y otra horizontal 16:9 para ordenador, cada una mostrada entera y sin recortes.
Animaciones construidas con GSAP, ScrollTrigger y SplitText para ligar el vídeo y el texto al scroll, con una versión reducida cuando el visitante tiene activada la preferencia de 'reducir movimiento' (sin animaciones, mostrando directamente la imagen final del edificio).
Fotos del estudio ampliadas con IA (Real-ESRGAN) a partir de los originales de Instagram, de 1080 px hasta 2880 px sin artefactos de compresión, y servidas en formatos modernos (AVIF/WebP) a la medida de cada pantalla.
Logotipo convertido a fondo transparente para funcionar tanto en el modo claro como en el oscuro automático de la web.
Sitio navegable por completo con teclado, con foco visible, textos alternativos en todas las imágenes y enlace para saltar al contenido.
