01 / 07
Una película en capítulos
El scroll conduce la película de dron de la bahía a las torres, la terraza y el hogar. Cada capítulo tiene su título y un índice de progreso abajo.
Velaire Miami
- Año
- 2026
- Lugar
- Miami, FL
- Plataforma
- Astro · GSAP · Vercel
- Servicios
- Diseño web
Un sitio cinematográfico para una inmobiliaria de Miami: controlas una película de la bahía con el scroll y luego exploras residencias con filtros en vivo.
Un proyecto concepto creado para mostrar lo que podemos hacer por una marca de este mercado. La marca y las personas son ficticias.
El reto
Los compradores de lujo juzgan a una inmobiliaria en segundos. La mayoría de los sitios de Miami parecen la misma plantilla de propiedades. Velaire debía sentirse como llegar en barco a la hora dorada, y aun así facilitar encontrar un hogar.
El enfoque
Cortamos una película de dron en 97 cuadros y los atamos al scroll, para que el visitante conduzca la cámara desde el horizonte hasta una sala. Los títulos ocupan todo el ancho con letras que suben una a una, las razones para elegir Velaire se apilan como tarjetas y la página de propiedades filtra al instante con reordenamiento animado.
02 / 07
Disponibles ahora
Una grilla editorial de propiedades destacadas: una grande y las demás apiladas, con estado, zona, habitaciones, baños y precio de un vistazo.
03 / 07
Residencias con filtros en vivo
Zonas, tipo, precio, habitaciones y orden. La grilla se reordena con una animación y los filtros quedan en la URL, así una búsqueda se puede compartir.
04 / 07
Nuevos desarrollos
Las torres en preventa tienen su propio panel: fecha de entrega, unidades, precio desde y solicitud directa de planos.
05 / 07
El interior, ambiente por ambiente
Cada residencia se cuenta ambiente por ambiente, con un título por espacio. Cada foto se abre a pantalla completa.
06 / 07
Estimación de pagos
El comprador ajusta el pago inicial y la tasa para ver una cuota mensual, junto a una tarjeta que presenta el barrio.
07 / 07
Guías de barrios
Cada zona muestra un precio medio, el tiempo al centro y algunas etiquetas, con un enlace a las propiedades disponibles.
El sitio en vivo
Míralo en movimiento
Grabaciones de pantalla del sitio real, sin edición: el scroll, las animaciones y las transiciones tal como los ve un visitante.
Lo que se mueve
- 01
Hero filmado controlado con el scroll
97 cuadros WebP dibujados en un canvas, cargados de lo grueso a lo fino para responder en menos de un segundo.
- 02
Títulos a todo lo ancho, letra por letra
Títulos ajustados al ancho de la pantalla, cada letra surgiendo de una máscara.
- 03
Tarjetas apiladas
Paneles fijos que retroceden cuando el siguiente se desliza encima.
- 04
Propiedades filtrables
Filtros por zona, tipo y precio guardados en la URL, con reordenamiento animado.
