01
Hero editorial
Promesa, atmósfera y primera imagen de marca sin depender de un slider o de demasiados claims.
AS
Atelier Arc Space
Arquitectura e interiorismo contemporáneo
Demo de portafolio conceptual para una marca de arquitectura
Espacios que se perciben antes de explicarse.
Esta pieza funciona como demo de portafolio: una web editorial para una marca ficticia de arquitectura e interiorismo, pensada para mostrar criterio visual, motion sobrio y una forma elegante de presentar proyectos.
01
Narrativa
El sitio cuenta el proyecto como secuencia espacial.
02
Materia
Piedra, madera, sombra y luz como lenguaje visual.
03
Motion
Transiciones suaves para marcar profundidad y ritmo.
Sistema
La estructura está pensada para que luego puedas reemplazar la demo por obra real.
02
Selector curatorial
Tres enfoques de proyecto para mostrar versatilidad sin romper la coherencia visual.
03
Portafolio visual
Bloques preparados para mostrar proyectos conceptuales hoy y casos reales después.
04
Metodología
Una sección que justifica el enfoque y refuerza percepción de rigor.
Curaduría
Un selector para presentar líneas de trabajo sin perder atmósfera.
Esta transición usa `ViewTransition` para cambiar de enfoque sin cortar la continuidad. Se siente más cercano a una maqueta editorial que a una interfaz genérica.
Casas donde la luz, la textura y el vacío construyen el lenguaje.
Diseñamos residencias con una lógica espacial precisa: circulación limpia, materiales nobles y una atmósfera que se siente silenciosa incluso en pantalla.
Portafolio
Tres piezas conceptuales para mostrar cómo se vería un portafolio real.
Hero: entrada suave con elevación mínima para establecer tono.
Selector: cambio de estado con view transitions para continuidad.
Portafolio: reveal con GSAP ScrollTrigger y desplazamiento vertical sutil.
Reduced motion: todas las animaciones decorativas se reducen o desactivan.
01
Proyecto Conceptual
Casa Ladera
Volumetría cálida, piedra lavada y un sistema de aperturas pensado para capturar sombra y horizonte.
02
Interiorismo
Estudio Nexo
Un workspace íntimo con madera oscura, acero cepillado y circulación visual limpia para creativos y consultores.
03
Hospitality
Hotel Umbral
Una experiencia boutique donde la recepción, el lounge y la suite funcionan como una misma secuencia espacial.
Método
La demo está construida para que después puedas convertirla en portafolio comercial real.
- 01Leer el proyecto como atmósfera antes que como lista de metros cuadrados.
- 02Ordenar la historia visual para que el sitio se sienta arquitectónico, no corporativo.
- 03Usar motion solo para enfatizar escala, transición y profundidad.
- 04Preparar el sistema para que después puedas reemplazar el contenido conceptual por obra real.
Siguiente paso
Cuando tengas un proyecto real, esta misma estructura puede absorberlo sin rehacer la narrativa.
Puedes reemplazar cada pieza conceptual por renders, fotografías, planos, memoria de proyecto y resultados reales sin perder coherencia de marca.