Estudio 02Galerías4 min de lectura
Atelier Umbral: una galería donde cada proyecto trae su luz
Diseñé y programé el hero de un estudio de interiores que no existe: el título entra por una máscara, doce imágenes crecen en el centro y se reparten, y al pasar sobre cada proyecto la página toma su luz. Después lo llevé más allá: teclado, pantalla táctil, movimiento reducido y una intro que solo anima transform.
- Dónde se ve
- Sitios de estudios y marcas de interiores: galerías que responden al cursor y un ambiente que cambia con cada proyecto.
- Herramientas
- Next.js · GSAP · CSS
- Más allá
- Que la misma galería funcione con teclado, en pantalla táctil y con movimiento reducido, sin perder su carácter.
En este estudio
Atelier Umbral es un estudio de diseño de interiores que no existe. Lo inventé para practicar una idea: que una galería no solo muestre fotos, sino la luz de cada proyecto. Una casa en Lisboa a las 6:40 no se siente igual que un apartamento en Ciudad de México a las 22:15.
El patrón
Los sitios de estudios de arquitectura e interiores suelen tener dos cosas en común: una intro que presenta el trabajo antes que el texto, y galerías que reaccionan al cursor. Aquí las dos van juntas, con una vuelta propia: al pasar sobre una imagen aparece una tarjeta tipo Pantone con el color, la hora, la ciudad y el nombre del proyecto, y el fondo de toda la página cambia a esa luz.
Cómo funciona
La intro tiene cuatro tiempos, en una sola línea de tiempo de GSAP:
- El título entra por su máscara. Cada línea vive dentro de un
spanconoverflow: hidden; elspande adentro sube desde abajo. - Las imágenes crecen apiladas en el centro, una tras otra.
- Se reparten y se achican hasta su lugar, mientras el título se esconde.
- Aparecen la navegación y el pie. Recién ahí la galería responde al cursor.
La tarjeta sigue al cursor con gsap.quickTo, una función preparada para recibir valores muchas veces por segundo sin crear una animación nueva en cada movimiento. El cambio de luz es una transición de color del fondo y el texto.
Mi versión
Habitar esuna forma de luz
Con teclado: Tab recorre las imágenes y la tarjeta aparece junto a la elegida. En pantalla táctil, un toque la fija; otro toque, o Esc, la cierra.
La primera versión es un HTML con CSS y GSAP; está en su repositorio . Para el lab la llevé a un componente de React y le sumé lo que la primera no resolvía.
Más allá
| Aspecto | Primera versión | Versión del lab |
|---|---|---|
| Animación de las imágenes | width, height, top y left | Solo transform (posición y escala) |
| Nitidez de las miniaturas | Imagen chica que crece en la intro | Imagen grande que se achica: siempre nítida |
| Interacción | Solo mouse | Mouse, teclado (Tab) y toque |
| Movimiento reducido | La intro se reproduce igual | Se salta la intro y la galería aparece en su lugar |
| Descripciones | alt vacío en las 12 imágenes | Proyecto, escena, hora y lugar en cada una |
Rendimiento: animar transform
En la primera versión las imágenes animaban width, height, top y left. Cada una de esas propiedades obliga al navegador a recalcular el layout en cada frame, y con doce imágenes a la vez es justo donde una intro se traba en un celular.
En el lab cada imagen se maqueta grande, en su posición final, y la intro mueve solo transform: primero la lleva al centro en escala cero, después la hace crecer y al final la achica hasta su tamaño de miniatura. El resultado se ve igual, pero el navegador ya no recalcula el layout; solo compone capas.
Hay un beneficio extra: como la miniatura es una imagen grande reducida, siempre se ve nítida. En la primera versión la imagen crecía desde 75 × 100 px.
Teclado y pantalla táctil
Cada imagen es un botón. Con Tab se recorren en orden y la tarjeta aparece junto a la imagen elegida, no junto a un cursor que no existe. En pantalla táctil, un toque fija la tarjeta y otro la cierra; Esc también la cierra.
Un detalle: el foco se dibuja sobre una imagen escalada, así que un borde de 2 px se vería de medio píxel. El grosor se divide por la escala para que el foco mida siempre lo mismo.
Movimiento reducido
Con prefers-reduced-motion, la intro se salta: la galería aparece directamente en su lugar y la tarjeta aparece sin escalar. El cambio de luz se mantiene, porque es un cambio de color y no de movimiento. Prueba el interruptor "Simular movimiento reducido".
Descripciones
Las doce imágenes tenían alt vacío. Ahora cada botón dice el proyecto, qué se ve, la hora y el lugar: "Casa Alba: dormitorio con luz de mañana y una vasija de barro. 06:40 · Lisboa, 2024". Para un lector de pantalla, la galería es tan explorable como para quien la ve.