Mockup ilustrativo: la portada de Sander en un monitor centrado, en una sala tranquila con pared de lamas de roble, muestras de material, un plano y una llave sobre un camino de lino.
Producto

Sander Residences

una casa que se recorre con el scroll

EstadoEn vivo
RolDirección de arte, película e imágenes asistidas por IA, diseño UX/UI y desarrollo frontend
Año2026
Stack
vitejavascriptlenisffmpegreal-esrgancloudflare r2

Resumen

La página de una residencia construida alrededor de una película de 25 segundos, generada con IA, que avanza con el scroll: cinco escenas, un plano que sigue a la cámara y un paseo por las estancias y sus materiales.

Una residencia en la que se entra por una película

Sander Residences presenta una casa como lo haría una visita: desde el acceso, por las zonas de día y subiendo la escalera hasta una suite privada, para volver a salir al atardecer. Un recorrido de cámara de 25 segundos sostiene la apertura y solo avanza, o retrocede, cuando el visitante hace scroll.

El trabajo reúne dirección de arte, una película e imágenes generadas con IA, diseño UX/UI y desarrollo frontend: la película guiada por el scroll, el capítulo de la residencia, un paseo por cinco estancias, el jardín y una consulta privada. Sander es un proyecto conceptual; la casa, su película y sus fotografías están generadas y no corresponden a una propiedad en venta.

Portada de Sander en escritorio: la casa blanca de líneas modernas al atardecer, el titular Life, beautifully considered y el plano de la residencia a la derecha.

Veinticinco segundos que se recorren con el scroll

La película es una única toma continua, escalada a 1080p e interpolada a 48 fotogramas por segundo para que un scroll lento no avance a saltos. Cinco escenas, llegada, zonas de día, escalera, suite y regreso, se sincronizan con el fotograma que se ve y no con la rueda, y un pequeño plano de dos plantas dibuja el recorrido de la cámara mientras avanza.

Un velo del color del papel espera sobre el primer fotograma mientras se descarga la película, con su progreso real, y se levanta cuando la cámara ya puede moverse. Con movimiento reducido la película no se carga; la página se lee como fotografías y texto.

Cinco fotogramas de la película de Sander con sus títulos de escena y tiempos, sobre una línea de 25,04 segundos y 9,5 pantallas de scroll.

Un sistema tranquilo sobre papel

Tonos de papel, una tinta verde eucalipto, dos tipografías, un mismo eje para todos los capítulos, pocos componentes cuidados, el plano y tres movimientos. Estos seis estudios acompañan a la película.

06
  • Paleta de papel, filete, fondo de la película, tinta, acento y lámpara, con una acción principal verde oscuro.
  • Cormorant Garamond para titulares y Manrope para el texto, con la escala desde los títulos de la película hasta las etiquetas.
  • El capítulo de la residencia con una línea sobre el eje común, al 17% del ancho de contenido.
  • Componentes reales: la navegación por capítulos sobre la película, el plano, el pie de una estancia y el panel de consulta privada.
  • El plano de la residencia en tres momentos: la llegada, la escalera y la planta alta.
  • Tres movimientos: el velo del loader, el paseo por las estancias y el jardín que se abre desde una ranura.

Después de la película, la casa por capítulos

Bajo la película, la página baja el ritmo. El capítulo de la residencia muestra la arquitectura; A way of living recorre en horizontal cinco estancias, cada una junto al material que la define, madera, piedra, roble, lino y vidrio; el jardín se abre desde una ranura estrecha hasta todo el ancho de la pantalla; y la invitación cierra la página.

Cada estancia abre la consulta privada con esa estancia ya elegida. La consulta prepara una nota que se queda el visitante; no se envía nada. Los capítulos sobre papel comparten un mismo eje y un mismo cuerpo de titular, así que después de la apertura cinematográfica la página se lee como un solo documento.

El paseo por las estancias en escritorio: A home, in its elements, con la cocina y la escalera, cada una con su lámina de material y su pie.
Sander en escritorio junto a tres pantallas de teléfono: la apertura, el paseo por las estancias y el jardín.
Mockup ilustrativo de cierre: el paseo por las estancias en un monitor y la apertura en un teléfono, sobre una consola de roble con muestras de material, un plano y una llave.

Resultado navegable

Sander Residences

Más proyectos